75

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

4

5 回答 5

122

试试这个：

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;
   }
}
于 2010-03-01T02:21:35.460 回答
24

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

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

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

值得了解的细节：

  • 调用event.preventDefault()keydown 事件的处理程序将阻止按键的默认效果。当按下一个字符时，这会阻止它被输入到活动文本字段中。在文本字段中按退格键或删除键时，它可以防止字符被删除。在没有活动文本字段的情况下按退格键时，在 Chrome 之类的浏览器中，退格键会将您带回上一页，它会阻止该行为（只要您通过添加事件侦听器document而不是文本字段来捕获事件）。

  • 关于如何确定属性值的文档keyCode可以在 W3 的 UI 事件规范中的B.2.1 如何确定keyCode事件keydown和keyup事件部分中找到。具体而言，Backspace 和 Delete 的代码在B.2.3 固定虚拟键代码中列出。

  • 正在努力弃用该.keyCode属性以支持.keyand.code。W3 将该.keyCode属性描述为“legacy”，并将 MDN 描述为“deprecated”。

    更改为.keyand的一个好处是.code对非 ASCII 键具有更强大和对程序员友好的处理 - 请参阅列出所有可能键值的规范，这些键值是人类可读的字符串，例如"Backspace"并且"Delete"包含来自特定修饰键的所有内容的值到日文键盘以掩盖媒体键。另一个与这个问题高度相关的是区分修改后的按键和按下的物理键的含义。

    在小型 Mac 键盘上，没有Delete键，只有一个Backspace键。但是，按Fn+Backspace相当于Delete在普通键盘上按 - 也就是说，它会删除文本光标之后的字符，而不是之前的字符。根据您的用例，在代码中，您可能希望将按住的按下作为 Backspace 或 Delete 来Backspace处理Fn。这就是为什么新的密钥模型让您选择的原因。

    该.key属性为您提供了按键的含义，因此Fn+Backspace将产生 string "Delete"。该.code属性为您提供物理键，因此Fn+Backspace仍会产生 string "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');
    }
});
于 2016-02-28T23:49:29.873 回答
18

event.key === "退格" 或 "删除"

更新和更清洁：使用event.key. 没有更多的任意数字代码！

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

Mozilla 文档

支持的浏览器

于 2017-12-03T01:27:32.510 回答
7

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

键码信息
键码列表

于 2010-03-01T02:21:08.550 回答
0

不确定它是否在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_DELETE46

于 2010-03-01T02:26:48.667 回答