如何在 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

如今，执行此操作的代码应如下所示：

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 事件规范中的 B.2.1 How to determine keyCode for keydown and keyup events 部分找到。特别是，Backspace 和 Delete 的代码在 B.2.3 Fixed virtual key codes 中列出。

• 正在努力弃用.keyCode 属性以支持.key and .code。 W3 将.keyCode 属性描述为"legacy"，将MDN 描述为"deprecated"。

  更改为 .key 和 .code 的一个好处是对非 ASCII 键的处理更加强大且对程序员更友好 - 请参阅 the specification that lists all the possible key values，它们是人类可读的字符串，例如 "Backspace" 和 "Delete"并包括从特定于日语键盘的修饰键到晦涩的媒体键的所有值。另一个与这个问题高度相关的是区分修改后按键的含义和按下的物理键。

  在small Mac keyboards 上，没有Delete 键，只有一个Backspace 键。但是，按 Fn+Backspace 相当于在普通键盘上按 Delete - 即删除字符 em> 文本光标而不是它之前的光标。根据您的用例，在代码中，您可能希望在按下 Fn 的同时按下 Backspace 作为 Backspace 或 Delete。这就是新的密钥模型让您选择的原因。

  .key 属性为您提供了按键的含义，因此 Fn+Backspace 将产生字符串 "Delete"。 .code 属性为您提供物理键，因此 Fn+Backspace 仍将产生字符串 "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 3

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 Docs

Supported Browsers

Answer 4

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

Keycode information
Keycode list

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 或将它们定义为常量（以提高可读性）