我正在使用keypress
侦听器,例如..
addEventListener("keypress", function(event){
}
但是,这似乎没有检测到擦除文本的退格...
我可以使用不同的侦听器来检测这个吗?
我正在使用keypress
侦听器,例如..
addEventListener("keypress", function(event){
}
但是,这似乎没有检测到擦除文本的退格...
我可以使用不同的侦听器来检测这个吗?
KeyPress事件被用于字符仅调用(打印)的键,KeyDown事件引发的所有包括不可打印如Control,Shift,Alt,BackSpace,等。
更新:
当一个键被按下并且该键通常产生一个字符值时会触发 keypress 事件
参考。
尝试keydown
代替keypress
.
键盘事件按以下顺序发生:keydown
, keyup
,keypress
退格键的问题可能是,浏览器将重新导航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 事件。
最后,要回答您的问题,您应该在 Firefox 和 Chrome 中使用keyup
或keydown
检测退格键。
在这里尝试一下:
$(".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');
}
});
更新更干净:使用event.key
. 没有更多的任意数字代码!
note.addEventListener('keydown', function(event) {
const key = event.key; // const {key} = event; ES6+
if (key === "Backspace") {
// Do something
}
});