如何在 onkeydown 事件中捕获退格

IT技术 javascript onkeydown
2021-02-21 15:55:19

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

5个回答

试试这个:

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;
   }
}
注意: event.keyCode 已弃用;考虑 event.key 代替。请参阅此处:developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent
2021-04-22 15:55:19
这个答案中的代码有很多“令人讨厌”的地方:不遵循常见 javascript 命名约定的标识符,创建一个最好已内联 (IMO) 的变量,未缩进的 case 语句。尽管如此,它确实回答了这个问题......
2021-04-29 15:55:19
我无法在 type =tel 或 type=password 上这样做
2021-05-17 15:55:19

如今,执行此操作的代码应如下所示:

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 事件的处理程序将阻止按键的默认效果。当按下一个字符时,这会阻止它被输入到活动文本字段中。在文本字段中按退格键或删除键时,可防止删除字符。当在没有活动文本字段的情况下按退格键时,在像 Chrome 这样的浏览器中,退格键会将您带回上一页,它会阻止这种行为(只要您通过添加事件侦听器document而不是文本字段来捕获事件)。

  • 关于如何keyCode确定属性值的文档可以在 W3 的 UI 事件规范中的B.2.1 如何确定keyCodeforkeydownkeyup事件中找到。特别是 Backspace 和 Delete 的代码在B.2.3 固定虚拟键代码中列出

  • 正在努力弃用该.keyCode属性以支持.key.codeW3 将该.keyCode属性描述"legacy",MDN 描述为"deprecated"

    更改.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');
        }
    });
    
来自未来的你好!很好的答案!我们现在是 82.25%
2021-04-21 15:55:19
我很惊讶 webkit 这么晚才加入这个密钥/代码派对。像往常一样,我首先检查了 IE 支持,并惊讶于最近的版本支持它,而 Chrome 仍然不支持(2016 年 5 月)。
2021-04-22 15:55:19

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

支持的浏览器

很好的信息,但你应该event.preventDefault();而不是return false因为你的例子不是内联的......
2021-05-20 15:55:19

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

键码信息
键码列表

不确定它是否在 Firefox 之外工作:

callback (event){
  if (event.keyCode === event.DOM_VK_BACK_SPACE || event.keyCode === event.DOM_VK_DELETE)
    // do something
  }
}

如果没有,请更换event.DOM_VK_BACK_SPACE8event.DOM_VK_DELETE46或将它们定义为常数(更好的可读性)