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

Question

我有一个由 onkeydown 触发的函数文本框的 事件。如何判断用户是否按下了退格键或德尔键？

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

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 文档

支持的浏览器

Answer 3

只要您同意不支持旧版浏览器，就可以使用 .key 或 的 .code 属性键盘事件。截至 2023 年 7 月，超过 97% 的用户浏览器支持。使用它们的代码应如下所示像这样的事情：

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

如果由于某种原因您需要支持古老的浏览器，则执行此操作的代码应该使用已弃用的 .keyCode 属性（尽管请参阅下面关于为什么这个旧界面较差的讨论）：

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

旧版 更改的一个好处。 keyCode 到较新的 .key 和 .code 具有更强大且程序员友好的非 ASCII 键处理 - 请参阅 列出所有可能的键值的规范，它们是人类可读的字符串，例如 < code>“Backspace” 和 “Delete” 并包含从日语键盘特有的修饰键到晦涩的媒体键等所有内容的值。另一个好处是，新界面区分了修改按键的含义和按下的物理按键。

事实证明，这与这个问题高度相关！在 Mac 小键盘上，没有 Delete 键，只有一个退格键。但是，按 Fn+Backspace 相当于在普通键盘上按 Delete - 也就是说，它会删除之后的字符 em> 文本光标而不是其前面的光标。根据您的用例，在代码中您可能需要处理 Backspace 按下，同时按住 Fn 作为 Backspace 或 Delete。这就是为什么新界面允许您选择要检查的内容。

.key 属性为您提供按键的含义，因此 Fn+Backspace 将生成字符串 “删除”。 .code 属性为您提供物理按键，因此 Fn+Backspace 仍会生成字符串 "Backspace" 。

Answer 4

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

键码信息< br>
键码列表

Answer 5

不确定它是否在 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 code> 或将它们定义为常量（为了更好的可读性）