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

JavaScript listener, "keypress" doesn't detect backspace?

提问by Skizit

I'm using a keypresslistener eg..

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

addEventListener("keypress", function(event){

}

However, this doesn't seem to detect a backspace which erases text...

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

Is there a different listener I can use to detect this?

我可以使用不同的侦听器来检测这个吗？

回答by Kris Ivanov

KeyPress event is invoked only for character (printable) keys, KeyDown event is raised for all including nonprintable such as Control, Shift, Alt, BackSpace, etc.

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

UPDATE:

更新：

The keypress event is fired when a key is pressed down and that key normally produces a character value

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

Reference.

参考。

回答by Tomalak

Try keydowninstead of keypress.

尝试keydown代替keypress.

The keyboard events occur in this order: keydown, keyup, keypress

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

The problem with backspace probably is, that the browser will navigate back on keyupand thus your page will not see the keypressevent.

Backspace 的问题可能是，浏览器将重新导航keyup，因此您的页面将看不到该keypress事件。

回答by user2314737

The keypressevent might be different across browsers.

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

I created a Jsfiddleto compare keyboard events (using the JQuery shortcuts) on Chrome and Firefox. Depending on the browser you're using a keypressevent will be triggered or not -- backspace will trigger keydown/keypress/keyupon Firefox but only keydown/keyupon Chrome.

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

Single keyclick events triggered

单键点击事件触发

on Chrome

在 Chrome 上

• keydown/keypress/keyupwhen browser registers a keyboard input (keypressis fired)

• keydown/keyupif no keyboard input (tested with alt, shift, backspace, arrow keys)

• keydownonly for tab?

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

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

• keydown仅用于标签？

on Firefox

在 Firefox 上

• keydown/keypress/keyupwhen browser registers a keyboard input but also for backspace, arrow keys, tab (so here keypressis fired even with no input)

• keydown/keyupfor alt, shift

• keydown/keypress/keyup当浏览器注册键盘输入以及退格键、箭头键、制表符时（因此keypress即使没有输入也会触发）

• keydown/keyup为 alt, shift

---

---

This shouldn't be surprising because according to https://api.jquery.com/keypress/:

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

Note: as the keypress event isn't covered by any official specification, the actual behavior encountered when using it may differ across browsers, browser versions, and platforms.

注意：由于 keypress 事件未包含在任何官方规范中，因此使用它时遇到的实际行为可能因浏览器、浏览器版本和平台而异。

The use of the keypress event type is deprecated by W3C (http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keypress)

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

The keypress event type is defined in this specification for reference and completeness, but this specification deprecates the use of this event type. When in editing contexts, authors can subscribe to the beforeinput event instead.

本规范中定义了按键事件类型以供参考和完整性，但本规范不赞成使用此事件类型。在编辑上下文时，作者可以改为订阅 beforeinput 事件。

---

---

Finally, to answer your question, you should use keyupor keydownto detect a backspace across Firefox and Chrome.

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

---

---

Try it out on here:

在这里尝试一下：

$(".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>

回答by Seth McClaine

Something I wrote up incase anyone comes across an issue with people hitting backspace while thinking they are in a form field

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

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

回答by VolkanCetinkaya

My numeric control:

我的数控：

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);" />

try it

尝试一下

BackSpace key code is 8

BackSpace 键码为 8

回答by Gibolt

event.key === "Backspace"

event.key === "退格"

More recent and much cleaner: use event.key. No more arbitrary number codes!

更新更干净：使用event.key. 没有更多的任意数字代码！

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

Mozilla Docs

Mozilla 文档

Supported Browsers

支持的浏览器

回答by arash nadali

Use one of keyup / keydown / beforeinput events instead.

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

based on thisreference, keypress is deprecated and no longer recommended.

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

The keypress event is fired when a key that produces a character value is pressed down. Examples of keys that produce a character value are alphabetic, numeric, and punctuation keys. Examples of keys that don't produce a character value are modifier keys such as Alt, Shift, Ctrl, or Meta.

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

if you use "beforeinput" be careful about it's Browser compatibility. the difference between "beforeinput" and the other two is that "beforeinput" is fired when input value is about to changed, so with characters that can't change the input value, it is not fired (e.g shift, ctr ,alt).

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

I had the same problem and by using keyup it was solved.

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