JavaScript监听器,"keypress"不检测退格？

Question

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

addEventListener("keypress", function(event){

}

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

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

Answer 1

KeyPress事件被用于字符仅调用(打印)的键,KeyDown事件引发的所有包括这样的非打印如Control,Shift,Alt,BackSpace,等.

更新:

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

参考.

Answer 2

尝试keydown而不是keypress.

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

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

Answer 3

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,shift

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

注意:由于任何官方规范都没有涵盖按键事件,因此使用它时遇到的实际行为可能因浏览器,浏览器版本和平台而异.

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

keypress事件类型在本规范中定义,以供参考和完整,但此规范不建议使用此事件类型.在编辑上下文时,作者可以订阅beforeinput事件.

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

event.key === "退格"

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

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

Mozilla 文档

支持的浏览器

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

试试吧

BackSpace密钥代码是8