JavaScript 侦听器,“按键”没有检测到退格键?

IT技术 javascript keypress addeventlistener
2021-02-06 07:59:09

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

addEventListener("keypress", function(event){

}

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

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

6个回答

KeyPress事件被用于字符仅调用(打印)的键,KeyDown事件引发的所有包括不可打印如ControlShiftAltBackSpace,等。

更新:

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

参考

在当前版本的 Mozilla 中,在按键事件中检测到退格和所有内容。
2021-04-02 07:59:09
严格来说并非如此:许多不可打印的键keypress会在许多浏览器中触发事件。unixpapa.com/js/key.html
2021-04-05 07:59:09

尝试keydown代替keypress.

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

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

似乎对于输入中的关键事件,在keyup触发事件之前,角色不会出现在字段中
2021-03-21 07:59:09
我还没有研究标准,但事件顺序(至少在 Firefox 37 中)似乎是keydown keypress keyup. unixpapa.com/js/testkey.html
2021-03-23 07:59:09
这就是答案。这捕获了删除按键和 Ctrl+V 按键
2021-04-04 07:59:09
最后一个 - 在 iOS (8.2) 上,退格键只会触发一个keydown事件,但直到之后的某个时间才会从输入中删除该字符。
2021-04-08 07:59:09

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

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

单键点击事件触发

在 Chrome 上

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

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

  • keydown 仅用于选项卡?

在 Firefox 上

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

  • keydown/keyup 用于 alt,移位


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

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

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

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


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


在这里尝试一下:

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

代码片段非常有帮助
2021-03-18 07:59:09
W3School 已经完成了:w3schools.com/jsref/...
2021-03-25 07:59:09
很棒的答案 - 主要是为了解释跨浏览器处理退格的不同方法
2021-04-08 07:59:09

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

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

event.key === "退格"

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

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

Mozilla 文档

支持的浏览器

仅仅因为您一直在使用并不意味着没有更好的选择。.key目前是文档推荐的选项。此外,它还支持对任何给定键具有不同映射的各种国际键盘。它们不是任意的,因为它们是固定的,但是在阅读代码时它们是任意
2021-03-17 07:59:09
在我使用过的每一种语言中,我一直在使用键代码 8 作为退格键。学习 ASCII 码,它们不是随意的。
2021-03-20 07:59:09
在 2018 年,这是实现这一目标的最佳方式!
2021-03-28 07:59:09