如何捕获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();
    }
});

虽然在未来,一旦他们在浏览器广泛支持,您可能需要使用.key或.code属性KeyboardEvent,而不是弃用的.keyCode.

细节值得了解:

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

• 文档了解如何在价值keyCode确定属性可以在一节中找到B.2.1如何确定keyCode的keydown和keyup事件在W3的UI事件规范.特别是,Backspace和Delete的代码列在B.2.3固定虚拟键代码中.

• 正在努力弃用该.keyCode属性以支持.key和.code.W3将该.keyCode属性描述为"遗留",将MDN描述为"已弃用".

  该变化的一个好处.key,并.code在具有非ASCII键的功能更强大,程序员友好的操作方式-看,列出了所有可能的键值的规范,这就像人类可读的字符串"Backspace",并"Delete"与包括价值观,一切从具体组合键日本键盘模糊媒体键.另外,这是对这个问题高度相关,是区分修改按键的意义和按下的物理按键.

  在小型Mac键盘上,没有Delete钥匙,只有Backspace钥匙.但是,按Fn+键Backspace相当于按下Delete普通键盘 - 也就是说,它会删除文本光标后面的字符而不是前面的字符.取决于你的使用情况,在代码中你可能要处理的新闻Backspace与Fn作为要么退格键或删除按住.这就是新键模型让您选择的原因.

  该.key属性为您提供了按键的含义,因此Fn+ Backspace将产生字符串"Delete".该.code属性为您提供物理键,因此Fn+ Backspace仍将生成字符串"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');
      }
  });
  

Answer 3

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

密钥代码信息
密钥代码列表

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

支持的浏览器