如何在onkeydown事件上捕获退格键

Question 1

我有一个由onkeydown文本框事件触发的功能。如何判断用户是否按下了Backspace键或del键？

Question 2

尝试这个：

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;
   }
}

Question 3

如今，执行此操作的代码应类似于：

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();
    }
});

尽管将来，一旦它们在浏览器中得到广泛支持，您可能希望使用的.key或.code属性KeyboardEvent而不是不推荐使用的.keyCode。

值得了解的详细信息：

调用event.preventDefault()keydown事件的处理程序将防止按键的默认效果。当按下一个字符时，这将阻止它被键入到活动文本字段中。在文本字段中按退格键或删除时，可以防止删除字符。在没有活动文本字段的情况下按退格键时，在Chrome之类的浏览器中，退格键会将您带回上一页（只要您通过添加事件监听器document而不是文本字段来捕获事件即可）。
如何在价值文档keyCode确定属性可以在一节中找到B.2.1如何确定keyCode的keydown和keyup事件在W3的UI事件规范。特别是，B.2.3固定虚拟键码中列出了退格键和删除键的代码。
目前正在努力反对.keyCode赞成.key和.code赞成弃用该属性。W3将.keyCode属性描述为“旧版”，将MDN描述为“不推荐使用”。

该变化的一个好处.key，并.code在具有非ASCII键的功能更强大，程序员友好的操作-看到的规范，列出所有可能的密钥值，这就像人类可读的字符串"Backspace"，并"Delete"与包括价值观，一切从组合键具体日语键盘来掩盖媒体键。与该问题高度相关的另一个问题是区分修改后的按键的含义和所按下的物理按键的含义。

在小型Mac键盘上，没有Delete键，只有Backspace键。但是，按Fn+Backspace等同于按Delete普通键盘上的键-也就是说，它删除文本光标之后的字符，而不是之前的字符。取决于你的使用情况，在代码中你可能要处理的新闻Backspace与Fn作为要么退格或删除按住。这就是为什么新的密钥模型可以让您选择的原因。

该.key属性为您提供按键的含义，因此Fn+Backspace将产生字符串"Delete"。该.code属性为您提供物理键，因此Fn+Backspace仍会产生字符串"Backspace"。

不幸的是，在编写此答案时，只有18％的浏览器支持它们，因此，如果您需要广泛的兼容性，那么.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');
    }
});
```

Question 4

event.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文件

支持的浏览器

Question 5

在您的功能中检查键码8（退格键）或46（删除）

按键信息
 按键列表

Question 6

不知道它是否在Firefox之外工作：

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

如果没有，请更换event.DOM_VK_BACK_SPACE与8和event.DOM_VK_DELETE与46或将它们定义为常数（更好的可读性）