JavaScript监听器,“按键”不检测退格?
我正在使用keypress
监听器,例如..
addEventListener("keypress", function(event){ }
但是,这似乎并没有检测到一个退格删除文本..有没有一个不同的监听器,我可以用它来检测?
KeyPress事件仅用于字符(可打印)键,KeyDown事件引发所有包括不可打印的控件 , Shift , Alt , BackSpace等。
更新:
当按下一个键并且该键通常产生一个字符值时,按键事件被触发
参考 。
尝试keydown
而不是keypress
。
键盘事件按以下顺序发生: keydown
, keyup
, keypress
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事件。
最后,要回答您的问题,您应该使用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>
我所写的任何事情都会遇到一个问题,那就是人们认为他们在一个表单领域的时候碰到了退格问题
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