event.key ===“Backspace”

Question

我正在使用keypress听众，例如..

addEventListener("keypress", function(event){

}

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

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

Answer 1

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

更新：

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

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 for alt，shift

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

注意：由于任何官员都不承担按键事件规范，使用它时遇到的实际行为可能不同浏览器，浏览器版本和平台。

W3C（http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keypress）

不推荐使用按键事件类型

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

最后，要回答您的问题，您应该使用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

我的数字控件：

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 6

event.key ===“Backspace”

更新，更清洁：使用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 7

使用keyup / keydown / beforeinput事件之一代替。

基于this参考，已弃用按键，不再推荐。

当产生字符值的键被触发时，会触发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
});

JavaScript监听器，“keypress”不检测退格？

8 个答案:

触发单键击事件

event.key ===“Backspace”