如何在onkeydown事件上捕獲退格

Question

我有一個由文本框的onkeydown事件觸發的函數。我如何判斷用戶是否已經選擇了退格鍵或del鍵？

Answer 1

試試這個：

如果

document.addEventListener("keydown", KeyCheck); //or however you are calling your method 
function KeyCheck(event) 
{ 
    var KeyID = event.keyCode; 
    switch(KeyID) 
    { 
     case 8: 
     alert("backspace"); 
     break; 
     case 46: 
     alert("delete"); 
     break; 
     default: 
     break; 
    } 
} 

Answer 2

在該鍵碼8（退格鍵）你的功能檢查或46（刪除）

Keycode information
Keycode list

Answer 3

不知道它的工作原理的Firefox之外：

callback (event){ 
    if (event.keyCode === event.DOM_VK_BACK_SPACE || event.keyCode === event.DOM_VK_DELETE) 
    // do something 
    } 
} 

如果沒有，用8和event.DOM_VK_DELETE與46更換event.DOM_VK_BACK_SPACE或定義它們（更好的可讀性）

Answer 4

如今，代碼要做到這一點應該是這個樣子的常數：

document.getElementById('foo').addEventListener('keydown', function (event) { 
    if (event.keyCode == 8) { 
     console.log('BACKSPACE was pressed'); 

     // Call event.preventDefault() to stop the character before the cursor 
     // from being deleted. Remove this line if you don't want to do that. 
     event.preventDefault(); 
    } 
    if (event.keyCode == 46) { 
     console.log('DELETE was pressed'); 

     // Call event.preventDefault() to stop the character after the cursor 
     // from being deleted. Remove this line if you don't want to do that. 
     event.preventDefault(); 
    } 
}); 

雖然在未來，一旦它們在瀏覽器中得到廣泛支持，您可能需要使用KeyboardEvent的.key或.code屬性而不是已棄用的.keyCode。

細節值得了解：

• 調用在keydown事件將防止按鍵的默認效果的處理程序event.preventDefault()。當按下某個字符時，這會阻止它被輸入到活動文本字段中。當按下退格鍵或在文本字段中刪除時，它可以防止刪除一個字符。在沒有活動文本字段的情況下按退格鍵時，在類似Chrome的瀏覽器中，退格鍵可讓您回到上一頁，它可以防止此行爲（只要您將事件偵聽器添加到document而不是文本字段即可捕獲該事件）。

• 有關如何確定keyCode屬性的值的文檔可以在W3的UI Events Specification中的B.2.1 How to determine keyCode for keydown and keyup events部分找到。特別是Backspace和Delete的代碼列在B.2.3 Fixed virtual key codes中。

• 正在努力推廣.key and .code以取消.keyCode屬性。 W3將.keyCode屬性描述爲"legacy"，並將MDN描述爲"deprecated"。的變化.key和.code的

  一個好處是有更強大的和程序員友好的非ASCII鍵的處理 - 見the specification that lists all the possible key values，這是人類可讀的字符串像"Backspace"和"Delete"，包括價值觀，一切從具體組合鍵到日語鍵盤來隱藏媒體密鑰。另一個與此問題高度相關的區別在於被修改的按鍵和的物理按鍵的含義。

  在small Mac keyboards，沒有刪除關鍵，只有退格鍵。不過，按下FN + Backspace鍵是相當於按下普通鍵盤上的Delete - 也就是說，它文本光標，而不是之前的一個後刪除字符。根據您的使用情況，在代碼中，您可能需要處理按下退格鍵與Fn按下退格鍵或刪除鍵。這就是爲什麼新的關鍵模型可以讓您選擇。

  的.key屬性可以向你意味着按鍵的，所以FN + Backspace鍵將生成字符串"Delete"。 .code屬性爲您提供物理密鑰，所以Fn + 退格仍將產生字符串"Backspace"。

  不幸的是，在寫這個答案時，他們只有supported in 18% of browsers，所以如果你需要廣泛的兼容性，你暫時堅持「傳統」.keyCode屬性。但如果你是一個來自未來的讀者，或者如果你針對一個特定的平臺，知道它支持全新的接口，那麼你可以寫一個看起來是這樣的代碼：

  document.getElementById('foo').addEventListener('keydown', function (event) { 
      if (event.code == 'Delete') { 
       console.log('The physical key pressed was the DELETE key'); 
      } 
      if (event.code == 'Backspace') { 
       console.log('The physical key pressed was the BACKSPACE key'); 
      } 
      if (event.key == 'Delete') { 
       console.log('The keypress meant the same as pressing DELETE'); 
       // This can happen for one of two reasons: 
       // 1. The user pressed the DELETE key 
       // 2. The user pressed FN+BACKSPACE on a small Mac keyboard where 
       // FN+BACKSPACE deletes the character in front of the text cursor, 
       // instead of the one behind it. 
      } 
      if (event.key == 'Backspace') { 
       console.log('The keypress meant the same as pressing BACKSPACE'); 
      } 
  }); 
  

Answer 5

事件.key ===「Backspace」或「Delete」

更新和更清潔：使用event.key。沒有更多的任意數字代碼！

input.addEventListener('keydown', function(event) { 
    const key = event.key; // const {key} = event; ES6+ 
    if (key === "Backspace" || key === "Delete") { 
     return false; 
    } 
}); 

Mozilla Docs

Supported Browsers