JavaScript 监听器，“按键”没有检测到退格键？

Question

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

addEventListener("keypress", function(event){

}

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

是否有不同的监听器可以用来检测这个？

Answer 1

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

更新：

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

参考。

Answer 2

尝试使用 keydown 而不是 keypress。

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

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

Answer 3

不同浏览器的 keypress 事件可能有所不同。

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

触发单键单击事件

在 Chrome 上

• 当浏览器注册键盘输入（keypress 被触发）时，

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

• keydown仅适用于选项卡？

在 Firefox 上

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

• keydown/keyup 用于 alt、shift

---

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

注意：由于任何官方均未涵盖按键事件
规范，使用时遇到的实际行为可能
因浏览器、浏览器版本和平台的不同而有所不同。

W3C 不推荐使用按键事件类型 (http://www .w3.org/TR/DOM-Level-3-Events/#event-type-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>

Answer 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');
    }
});

Answer 5

event.key === "Backspace"

更新且更简洁：使用 event.key。不再有任意数字代码！

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

Mozilla 文档

支持的浏览器

Answer 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

Answer 7

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

基于此参考，按键已被弃用并且不更长推荐。

当按键产生字符值时，将触发按键事件
被按下。产生字符值的键的示例是
字母、数字和标点符号键。不支持的键示例
产生字符值的是修饰键，例如 Alt、Shift、Ctrl、
或元。

如果您使用“beforeinput”，请注意它的 浏览器兼容性。 “beforeinput”和其他两个之间的区别在于，“beforeinput”在输入值即将更改时被触发，因此对于无法更改输入值的字符，它不会被触发（例如shift，ctr，alt）。

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

Answer 8

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

addEventListener("keyup", function(event){

}

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

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