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

Question

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

addEventListener("keypress", function(event){

}

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

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

Answer 1

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

更新：

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

Reference.

Answer 2

尝试使用keydown 而不是keypress。

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

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

Answer 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>

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 === "退格"

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

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

Mozilla Docs

Supported Browsers

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 事件之一。

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

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

如果您使用“beforeinput”，请注意它是Browser compatibility。 "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
});