JavaScript监听器,“按键”不检测退格?

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

 addEventListener("keypress", function(event){ } 

但是,这似乎并没有检测到一个退​​格删除文本..有没有一个不同的监听器,我可以用它来检测?

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

更新:

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

参考 。

尝试keydown而不是keypress

键盘事件按以下顺序发生: keydownkeyupkeypress

backspace的问题可能是,浏览器将在keyup上导航,因此您的页面将看不到keypress事件。

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

我创build了一个Jsfiddle来比较Chrome和Firefox上的键盘事件(使用JQuery快捷键)。 根据您使用的keypress事件的浏览器将被触发或不会 – 退格将触发Firefox上的keydown/keypress/keyup ,但只有Chrome上的keydown/keyup

单键击事件触发

在Chrome上

  • 当浏览器注册一个键盘input时( keypress被触发), keydown/keypress/keyup

  • 如果没有键盘input,可以使用keydown/keyup (用alt,shift,backspace,箭头键testing)

  • keydown只为选项卡?

在Firefox上

  • keydown/keypress/keyup当浏览器注册键盘input,但也为退格键,箭头键,选项卡(所以这里keypress甚至没有input时被触发)

  • keydown/keyup alt,shift


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

注意:由于keypress事件没有被任何官方规范所覆盖,在浏览器,浏览器版本和平台上使用时遇到的实际行为可能会有所不同。

W3C不赞成使用按键事件types( http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keypress

keypress事件types在本规范中定义以供参考和完整,但本规范不赞成使用此事件types。 在编辑上下文时,作者可以订阅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