我试图捕获冒号(:)的keyCode,并意识到Firefox返回的是e.keyCode 56。而Chrome返回的是186(我想是这个)。
是否有一种在所有浏览器中获取正确keyCode的通用方法?
如果它们是相同的按键,为什么它们会不同?
我更想知道是否有一种国际通用的方式来获取相同的按键。
这取决于你是想知道用户按下了哪个物理键,还是输入了哪个字符。如果你需要的是字符,那么在所有主流浏览器中可以可靠地获取它(在大多数浏览器中使用 keypress
事件的 which
属性或 keyCode
在 IE <= 8 中),但只能在 keypress
事件中获取。如果你想要获得键值,则使用 keydown
或 keyup
事件并检查 keyCode
属性,尽管确切的键码映射在不同浏览器之间略有不同。
关于所有 JavaScript 键相关事件的详细解释和参考资料,请访问 http://unixpapa.com/js/key.html。
要可靠地检测用户在所有主要浏览器中输入冒号字符,可以执行以下操作:
document.onkeypress = function(e) {
e = e || window.event;
var charCode = (typeof e.which == "number") ? e.which : e.keyCode;
if (charCode && String.fromCharCode(charCode) == ":") {
alert("Colon!");
}
};
keypress
事件中,keyCode
令人困惑地是字符代码,而不是键代码,所有其他主流浏览器都支持which
,因此keyCode
仅用于旧版IE。请在http://unixpapa.com/js/key.html(链接到我的答案)中阅读有关此问题的所有信息。 - Tim Down请参考http://unixpapa.com/js/key.html,了解它们为什么有不同的键。我不知道有一种国际方式可以匹配键。
这是一个老问题。现代的做法是使用event.key。请参阅MDN Key
.
/ Del
)时,在Edge中报告事件键为“Del”,但在Chrome中报告为“.”。人们一直建议Safari是新的Internet Explorer。最近我想知道Edge是否真的是新的Internet Explorer。哦,等等。 - Dale Harrisevent.key
给出"逻辑"按键,event.code
给出"物理"按键在MacOS Firefox、Windows Edge和Windows Chrome上测试了一些示例:
event.key |
event.code |
---|---|
"Enter" | "Enter" |
"Enter" | "NumpadEnter" |
"8" | "Digit8" |
"8" | "Numpad8" |
"/" | "Slash" |
"/" | "NumpadDivide" |
ctrl+Enter
时,event.key
是"\n"
我是2023,我已经使用了一种不同的解决方案很长时间了。
它涉及使用隐藏的文本区域来获取键入的字符。这有点像黑客行为,但在所有主要浏览器中都可以完美运行,并且可以避免使用e.key或e.keyCode等带来的麻烦。
我将在此处发布代码。它相当自我解释。如果您想让它在包括Opera Mini在内的所有移动浏览器中工作,则必须将固定位置更改为绝对位置,并确保文本区域始终位于页面可见部分的中间,以避免每次键入字符时滚动。
基本上,创建一个隐藏的文本区域,将keydown事件添加到窗口对象以聚焦文本区域,获取文本区域的值,清除文本区域,再次聚焦先前聚焦的元素……然后选择性地在先前聚焦的元素中生成键入的字符。
/*create a hidden textarea*/
var keyGrabber = document.createElement('textarea');
keyGrabber.style.border = '0';
keyGrabber.style.margin = '0';
keyGrabber.style.padding = '0';
keyGrabber.style.outline = 'none';
keyGrabber.style.position = 'fixed';
keyGrabber.style.top = '0';
keyGrabber.tabIndex = '-1';
document.body.appendChild(keyGrabber);
/*Avoid confusion for screen readers*/
keyGrabber.setAttribute('aria-hidden','true');
/*Init the variables here so they are global and easy to access*/
var oldActiveElement = document.activeElement;
var oldStart = 0;
var oldEnd = 0;
/*Catch the keydown event and store the active elements selection start and end in case you still want the character to be typed*/
window.addEventListener('keydown',function(e){
oldActiveElement = document.activeElement;
oldStart = oldActiveElement.selectionStart;
oldEnd = oldActiveElement.selectionEnd;
keyGrabber.focus();
/*If you need to capture keys that don't generate written characters, you'll have to do that here using e.key || e.keyCode */
});
keyGrabber.addEventListener('input',function(){
var character = keyGrabber.value;
if(character == ':'){
alert('You typed a colon!');
/*replace alert with whatever code you want to execute when a colon is typed*/
}
keyGrabber.value = '';
oldActiveElement.focus();
/*This part is optional, in case you want to still have the typed character generate in an input and also fire the event. You would then also replace "window.addEventListener..." with "yourInput.addEventListener..."*/
var part1 = oldActiveElement.value.slice(0,oldStart);
var part2 = oldActiveElement.value.slice(oldEnd,oldActiveElement.value.length);
oldActiveElement.value = part1 + character + part2;
oldActiveElement.selectionStart = oldStart + 1;
oldActiveElement.selectionEnd = oldActiveElement.selectionStart;
});
同时也可以查看这个GitHub文件:https://github.com/bpeacock/key-to-charCode/blob/master/jQuery.getChar.js,了解如何使用keyDown事件而不是keyPress事件。
我在移动设备上使用它来扫描带有键盘楔的条形码扫描器,该设备在扫描连字符时返回(keyPress)数据存在错误。效果还不错。但是当我在具有常规键盘的浏览器中测试应用程序时,我注意到连字符在Chrome上有效,但在Firefox上无效。奇怪但却是事实。通过在上述JS文件中添加代码173以及代码189进行修复。
这让我想知道键盘实际上发送了什么。按下连字符键(- _)的keydown代码显然不是由键盘本身发送的,而是由浏览器创建并将keyDown事件发送到我的JavaScript应用程序。