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

Question

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

- Raphael

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

- Stephano

---

我无法在type = tel或type = password上执行此操作。 - George

这个答案的代码有很多不好的地方："标识符没有遵循常见的javascript命名约定，创建一个最好内联的变量（在我看来），未缩进的case语句。尽管如此，它确实回答了问题...". - Jasper

注意：event.keyCode已被弃用，请考虑使用event.key代替。请参见此处：https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent - Ilya

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

支持的浏览器

- Gibolt

---

很好的信息，但你应该使用event.preventDefault();而不是return false，因为你的示例不是内联的... - Brett Zamir

Answer 3

只要你不支持古老的浏览器，可以使用.key或.code属性来处理KeyboardEvent。从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键 - 请参阅列出所有可能键值的规范，其中包含人类可读的字符串，如"Backspace"和"Delete"，并包括了从特定于日本键盘的修饰键到晦涩的媒体键的所有值。另一个好处是新接口区分了修改后按键的含义和实际按下的物理键。

这实际上与这个问题非常相关！在小型Mac键盘上，没有“Delete”键，只有一个“Backspace”键。然而，按下“Fn”+“Backspace”等同于在普通键盘上按下“Delete” - 也就是说，它删除文本光标之后的字符，而不是之前的字符。根据您的用例，在代码中，您可能希望处理按下“Backspace”并同时按下“Fn”的情况，将其视为Backspace或Delete。这就是为什么新界面允许您选择要检查哪个选项。

“key”属性给出了按键的“含义”，因此“Fn”+“Backspace”将返回字符串“Delete”。而“code”属性给出了物理按键，所以“Fn”+“Backspace”仍然返回字符串“Backspace”。

- Mark Amery

---

我很惊讶 Webkit 在这个键/码派对上如此晚到。像往常一样，我首先检查了 IE 的支持情况，并惊讶地发现最近的版本已经支持它了，而 Chrome 仍然没有支持（截至 2016 年 5 月）。 - Bram Vanroy

你好，来自未来的问候！非常棒的答案！我们现在已经达到了82.25%。 - FlippingBinary

现在我们已经达到了98.34%。剩下的几个浏览器不支持此功能，它们都非常古老，并且将不再接收支持，但是仍有极小部分的互联网用户可能在旧设备上使用这些浏览器。 - Dennis

Answer 4

在你的函数中，检查键码为8（退格键）或46（删除键）。 键码信息
键码列表

- jasonbar

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

- Mathieu