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

2020/11/15 15:22 · javascript ·  · 0评论

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

addEventListener("keypress", function(event){

}

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

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

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

更新:

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

参考

尝试keydown代替keypress

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

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

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事件。


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

我写的东西是为了防止任何人在认为自己属于表单字段时遇到退格的问题

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

我的数控:

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

event.key ===“退格”

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

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

Mozilla文件

支持的浏览器

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

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

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

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

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

本文地址:http://javascript.askforanswer.com/javascriptzhentingqi-keypressmeiyoujiancedaotuigejian.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!