JavaScript 侦听器，“按键”不检测退格？

Posted 2023-02-22

【中文标题】JavaScript 侦听器，“按键”不检测退格？

【英文标题】：JavaScript listener, "keypress" doesn't detect backspace?

【发布时间】：2011-06-18 03:01:55

【问题描述】：

我正在使用keypress 监听器，例如..

addEventListener("keypress", function(event)

但是，这似乎没有检测到删除文本的退格...

我可以使用其他侦听器来检测吗？

【参考方案1】：

KeyPress 事件仅针对字符（可打印）键调用，KeyDown 事件针对所有包括不可打印的键引发，例如 Control、Shift、Alt、BackSpace等

更新：

当一个键被按下并且该键通常产生一个字符值时触发 keypress 事件

Reference.

【讨论】：

不完全正确：许多不可打印的键会在许多浏览器中触发 keypress 事件。见unixpapa.com/js/key.html

在当前版本的 Mozilla 中，在按键事件中检测到退格和 all。

【参考方案2】：

尝试使用keydown 而不是keypress。

键盘事件按以下顺序发生：keydown、keyup、keypress

退格的问题可能是，浏览器将导航回keyup，因此您的页面将看不到keypress 事件。

【讨论】：

我没有查看标准，但事件顺序（至少在 Firefox 37 中）似乎是keydownkeypresskeyup。 unixpapa.com/js/testkey.html

看来，对于输入中的关键事件，在触发 keyup 事件之前，字符不会出现在字段中。

最后一个 - 在 ios (8.2) 上，退格键只会触发 keydown 事件，但直到之后的某个时间，该字符才会从输入中删除。

这就是答案。这将捕获删除键和 Ctrl+V 键

【参考方案3】：

keypress 事件可能因浏览器而异。

我创建了一个Jsfiddle 来比较 Chrome 和 Firefox 上的键盘事件（使用 JQuery 快捷键）。取决于您使用的浏览器，keypress 事件是否会被触发——退格键会在 Firefox 上触发keydown/keypress/keyup，但在 Chrome 上只会触发keydown/keyup。

触发单键点击事件

在 Chrome 上

keydown/keypress/keyup 当浏览器注册键盘输入时（keypress 被触发）

keydown/keyup 如果没有键盘输入（使用 alt、shift、退格、箭头键测试）

keydown 仅用于选项卡？

在 Firefox 上

keydown/keypress/keyup 当浏览器注册键盘输入时，也注册退格键、箭头键、制表符（所以这里keypress 即使没有输入也会被触发）

keydown/keyup 用于 alt、shift

---

这应该不足为奇，因为根据https://api.jquery.com/keypress/：

注意：因为按键事件没有被任何官方覆盖 规范，使用它时遇到的实际行为可能 因浏览器、浏览器版本和平台而异。

W3C 已弃用 keypress 事件类型 (http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keypress)

keypress事件类型在本规范中定义以供参考 和完整性，但本规范不推荐使用此 事件类型。在编辑上下文中，作者可以订阅 beforeinput 事件。

---

最后，要回答您的问题，您应该使用 keyup 或 keydown 来检测 Firefox 和 Chrome 中的退格键。

---

在这里试试：

$(".inputTxt").bind("keypress keyup keydown", function (event) 
    var evtType = event.type;
    var eWhich = event.which;
    var echarCode = event.charCode;
    var ekeyCode = event.keyCode;

    switch (evtType) 
        case 'keypress':
            $("#log").html($("#log").html() + "<b>" + evtType + "</b>" + " keycode: " + ekeyCode + " charcode: " + echarCode + " which: " + eWhich + "<br>");
            break;
        case 'keyup':
            $("#log").html($("#log").html() + "<b>" + evtType + "</b>" + " keycode: " + ekeyCode + " charcode: " + echarCode + " which: " + eWhich + "<p>");
            break;
        case 'keydown':
            $("#log").html($("#log").html() + "<b>" + evtType + "</b>" + " keycode: " + ekeyCode + " charcode: " + echarCode + " which: " + eWhich + "<br>");
            break;
        default:
            break;
    
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input class="inputTxt" type="text" />
<div id="log"></div>

【讨论】：

很棒的答案 - 主要用于解释跨浏览器处理退格的不同方法

W3School 已经完成了：w3schools.com/jsref/…

代码片段很有帮助

【参考方案4】：

我写的一些东西，以防有人遇到人们在认为他们在表单字段中时按退格键的问题

window.addEventListener("keydown", function(e)
    /*
     * keyCode: 8
     * keyIdentifier: "U+0008"
    */
    if(e.keyCode === 8 && document.activeElement !== 'text') 
        e.preventDefault();
        alert('Prevent page from going back');
    
);

【参考方案5】：

event.key === "退格"

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

note.addEventListener('keydown', function(event) 
    const key = event.key; // const key = event; ES6+
    if (key === "Backspace") 
        // Do something
    
);

Mozilla Docs

Supported Browsers

【讨论】：

在 2018 年，这是解决这个问题的最佳方式！

在我使用的每一种语言中，我一直使用键码 8 作为退格键。学习 ASCII 码，它们不是任意的。

您已经一直在使用并不意味着没有更好的选择。 .key 目前是文档推荐的选项。此外，它还支持对任何给定键具有不同映射的各种国际键盘。它们在固定的意义上不是任意的，而是在阅读代码时是这样的

【参考方案6】：

我的数控：

function CheckNumeric(event) 
    var _key = (window.Event) ? event.which : event.keyCode;
    if (_key > 95 && _key < 106) 
        return true;
    
    else if (_key > 47 && _key < 58) 
        return true;
    
    else 
        return false;
    


<input type="text" onkeydown="return CheckNumerick(event);" />

试试看

BackSpace 键码是 8

【参考方案7】：

改用 keyup / keydown / beforeinput 事件之一。

基于this 参考，keypress 已弃用且不再推荐。

keypress 事件在产生字符值的键时触发 被按下。产生字符值的键的示例是 字母、数字和标点符号键。没有的键示例 生成字符值是修饰键，例如 Alt、Shift、Ctrl、 或元。

如果您使用“beforeinput”，请注意它是Browser compatibility。 "beforeinput" 和其他两个的区别在于，"beforeinput" 在输入值即将改变时被触发，所以对于不能改变输入值的字符，它不会被触发（例如 shift、ctr、alt）。

我遇到了同样的问题，通过使用 keyup 解决了。

【参考方案8】：

我正在尝试 keydown 并且 Backspace 没有被捕获。切换到 keyup 对我有用。

addEventListener("keyup", function(event)

供参考，以防有人使用.on 动态生成内容。

$("body").on( "keyup", ".my-element", function(evt) 
      // Do something
);