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


141

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

addEventListener("keypress", function(event){

}

但是,这似乎并未检测到删除文本的退格键...

我可以使用其他侦听器来检测到此声音吗?

Answers:


167

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

更新:

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

参考


3
并非完全正确:许多不可打印的键keypress会在许多浏览器中触发事件。参见unixpapa.com/js/key.html
蒂姆·唐

在当前版本的Mozilla中,在按键事件中会检测到退格键和所有键。
iniravpatel

70

尝试keydown代替keypress

键盘事件发生顺序如下:keydownkeyupkeypress

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


我没有研究标准,但是事件顺序(至少在Firefox 37中)似乎是keydown keypress keyupunixpapa.com/js/testkey.html
jxmallett

对于输入中的关键事件,似乎也不会出现该字符,除非keyup触发该事件。
jxmallett 2015年

最后一个-在iOS(8.2)上,退格键仅触发一个keydown事件,但直到此后的某个时间才将其从输入中删除。
jxmallett 2015年

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

30

keypress跨浏览器的事件可能有所不同。

我创建了一个Jsfiddle来比较Chrome和Firefox上的键盘事件(使用JQuery快捷方式)。根据使用的浏览器,是否keypress会触发事件-退格键将keydown/keypress/keyup在Firefox keydown/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

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


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


1
很棒的答案-主要是解释跨浏览器处理退格的不同方法
Jivan,2016年

2
:W3School已经完成它w3schools.com/jsref/...

1
代码段非常有帮助
John Gilmer

17

我写的东西是为了防止有人在认为自己处于表单域中时碰到退格的问题

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

8

我的数控:

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


6

event.key ===“退格”

最近更新,更清洁:使用event.key。没有更多的任意数字代码!

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

Mozilla文件

支持的浏览器


1
在2018年,这是实现此目标的最佳方法!
tfantina

我一直在使用的每种语言都将键代码8用于退格键。了解ASCII码,它们不是任意的。
安德烈·韦朗(AndréWerlang)'18

3
仅仅因为您一直在使用,并不意味着没有更好的选择。.key目前是文档推荐的选项。此外,它支持各种国际键盘,这些键盘针对任何给定的键具有不同的映射。从固定的意义上讲,它们不是任意的,但是在读取代码时是固定的
Gibolt

2

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

根据参考,已弃用按键,不再推荐。

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

如果您使用“ beforeinput”,请注意它的浏览器兼容性。“ beforeinput”和其他两个之间的区别是,在输入值即将更改时会触发“ beforeinput”,因此对于无法更改输入值的字符,不会触发(例如shift,ctr,alt)。

我有同样的问题,并且通过使用keyup得以解决。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.