JavaScript监听器，“keypress”无法检测退格键？

Question

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

addEventListener("keypress", function(event){

}

然而，这似乎无法检测到擦除文字的退格键...

是否有其他监听器可用于检测此类情况？

- Skizit

Answer 1

KeyPress事件仅在字符（可打印）键上调用，KeyDown事件对所有键都会触发包括非打印键，如Control，Shift，Alt，BackSpace等。

更新:

当按下一个通常产生字符值的按键时，触发keypress事件。

参考链接.

- Kris Ivanov

---

并不完全准确：许多非可打印键在许多浏览器中会触发“keypress”事件。请参阅http://unixpapa.com/js/key.html。 - Tim Down

在当前版本的Mozilla中，退格键和所有键都可以在keypress事件中检测到。 - iniravpatel

Answer 2

使用 keydown 而不是 keypress。

键盘事件的顺序为：keydown、keyup、keypress

退格键的问题可能在于，浏览器会在 keyup 上导航回退，因此您的页面将无法看到 keypress 事件。

- Tomalak

---

我还没有研究过标准，但是事件顺序（至少在Firefox 37中）似乎是 keydown keypress keyup。http://unixpapa.com/js/testkey.html - jxmallett

似乎对于输入中的关键事件，字符直到触发“keyup”事件后才会出现在字段中。 - jxmallett

最后一个 - 在iOS（8.2）上，退格键只触发keydown事件，但字符直到此后的某个时间才从输入中删除。 - jxmallett

这是答案。它捕获删除键按下和Ctrl+V键按下。 - user1709076

Answer 3

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

我创建了一个Jsfiddle，使用JQuery快捷方式比较Chrome和Firefox上的键盘事件。根据您使用的浏览器，keypress事件将被触发或不触发--在Firefox上，退格键会触发keydown/keypress/keyup，但在Chrome上只会触发keydown/keyup。

单击事件触发

在Chrome上：

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

• 如果没有键盘输入（使用alt、shift、backspace、箭头键测试），则只会触发keydown/keyup

• 仅对tab键触发keydown？

在Firefox上：

• 当浏览器注册键盘输入时，keydown/keypress/keyup都会触发，但是对于退格键、箭头键、选项卡（因此即使没有输入，这里也会触发keypress）

• 对于alt、shift，触发keydown/keyup

---

这不应该令人惊讶，因为根据https://api.jquery.com/keypress/：

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

W3C已经废弃了使用keypress事件类型（http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keypress）

此规范为参考和完整性而定义了keypress事件类型，但本规范停用了此事件类型。在编辑上下文中，作者可以订阅beforeinput事件。

---

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

---

请在此处尝试：

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

- user2314737

---

很棒的答案 - 主要是关于在不同浏览器中处理退格键的不同方法的解释。 - Jivan

W3School已经完成了它：http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_event_key_keycode2 - Tân

代码片段非常有帮助。 - John Gilmer

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

- Seth McClaine

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 文档

支持的浏览器

- Gibolt

---

在2018年，这是最好的处理方式！ - tfantina

我在我所接触的每种编程语言中都使用键码8来表示退格。学习ASCII代码，它们并不是随意的。 - André Werlang

仅仅因为你一直在使用某种方法，并不意味着没有更好的选择。文档目前推荐使用.key选项。此外，它支持各种国际键盘，可以映射任何给定键的不同按键。它们在阅读代码时可能是“任意的”，但并非无规律可循。 - Gibolt

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

请试一下

退格键的代码是8

- VolkanCetinkaya

Answer 7

请使用keyup / keydown / beforeinput事件中的一个。根据this的参考，keypress已被弃用且不再推荐使用。

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

如果使用“beforeinput”，请注意它的浏览器兼容性。 "beforeinput"与另外两个事件之间的差异在于，"beforeinput"在输入值即将更改时触发，因此对于不能更改输入值的字符，它不会被触发（例如shift、ctr、alt）。

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

- arash nadali

Answer 8

我尝试使用 keydown，但无法捕获退格键。改用 keyup 对我有用。

addEventListener("keyup", function(event){

}

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

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

- Shahbaz A.