event.key ===“退格”或“删除”

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

虽然将来一旦浏览器广泛支持它们，您可能希望使用.key的.code或KeyboardEvent属性，而不是已弃用的.keyCode

值得了解的详情：

在keydown事件的处理程序中调用event.preventDefault()将阻止按键的默认效果。按下某个字符时，会阻止其键入活动文本字段。在文本字段中按退格键或删除键时，会阻止删除字符。在没有活动文本字段的情况下按退格键时，在Chrome之类的浏览器中，退格键会将您带回上一页，它会阻止该行为（只要您通过将事件监听器添加到document而不是文本字段）。
有关如何确定keyCode属性值的文档可以在W3的UI事件规范的B.2.1 How to determine keyCode for keydown and keyup events部分找到。特别是，退格和删除的代码列在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，这些是人类可读的字符串，如{ {1}}和"Backspace"并包含从日语键盘特定的修饰键到模糊媒体键的所有内容的值。另一个与此问题高度相关的是区分修改后的按键的含义和按下的物理键。

在small Mac keyboards上，没有删除键，只有 Backspace 键。但是，按 Fn + 退格键相当于在普通键盘上按删除 - 也就是说，它会删除之后的字符 em>文本光标而不是之前的文本光标。根据您的使用案例，您可能希望在代码中处理按退格并按 Fn 按住Backspace或Delete。这就是新键模型让您选择的原因。

"Delete"属性为您提供了按键的含义，因此 Fn + Backspace 将产生字符串{{1 }}。 .key属性为您提供物理密钥，因此 Fn + Backspace 仍将生成字符串"Delete"。

不幸的是，在撰写此答案时，它们只是supported in 18% of browsers，所以如果您需要广泛的兼容性，那么暂时您仍然会使用“遗留”.code属性。但是如果您是未来的读者，或者如果您的目标是特定平台并且知道它支持新界面，那么您可以编写类似于以下内容的代码：

"Backspace"

Answer 3

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

Keycode information
Keycode list

Answer 4

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 Docs

Supported Browsers

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

如何捕获onkeydown事件的退格

5 个答案:

event.key ===“退格”或“删除”