如何处理不同浏览器上不同的keyCode?

问题描述 投票:0回答:7

我见过一些关于不同浏览器报告不同键码的论坛帖子,但每个人似乎都避免问“为什么?”。

我试图捕获冒号 (:) keyCode,并意识到 Firefox 报告返回 e.keyCode 56。而 Chrome 报告返回 186(我认为就是这样)。

是否有一种通用方法可以在所有浏览器中获取正确的键码?

如果它们是相同的键,为什么它们会不同?

我更好奇是否有一种国际化的方式来获得相同的按键。

javascript keycode
7个回答
18
投票

这取决于您是否对用户按下的物理键或用户输入的字符感兴趣。如果它是您要查找的字符,您可以在所有主要浏览器中可靠地获取该字符(在大多数浏览器中使用

keypress
事件的
which
属性或 IE 中的
keyCode
事件 <= 8), but only in the
keypress
)。如果您正在查找密钥,使用
keydown
keyup
事件并检查
keyCode
属性,尽管浏览器之间确切的键码映射确实有所不同。

可以在 http://unixpapa.com/js/key.html 找到所有与 JavaScript 键相关的事件的精彩解释和参考。

要检测用户在所有主要浏览器中可靠地键入冒号字符,您可以执行以下操作:

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!");
    }
};

13
投票

请参阅 http://unixpapa.com/js/key.html 了解它们为何具有不同密钥的解释。我不知道匹配密钥的国际方法。


3
投票

执行此操作的现代方法是使用 event.key。请参阅MDN 密钥


1
投票

2022 -
event.key
给出“逻辑”密钥,
event.code
给出“物理”密钥

一些示例在 macOS Firefox、Windows Edge 和 Windows Chrome 上测试:

event.key
event.code
“输入” “输入”
“输入” “数字键盘输入”
“8” “数字8”
“8” “数字键盘8”
“/” “斜线”
“/” “数字键盘除法”

边缘情况

  • Windows Chrome/Edge,按 Ctrl + Enter 时,
    event.key
    "\n"

0
投票

我认为你应该让JavaScript来获取“:”字符的键码,这样脚本就会知道在特定环境下它是什么。类似的问题已经被问过这里,在 stackoverflow


0
投票

还可以查看此 GitHub 文件:https://github.com/bpeacock/key-to-charCode/blob/master/jQuery.getChar.js 了解如何使用 keyDown 而不是 keyPress 事件。

我将其用于移动设备上带有键盘楔的条形码扫描仪,该扫描仪在返回用于扫描连字符的(按键)数据时存在错误。效果相当不错。除了当我使用普通键盘在浏览器中测试该应用程序时,我注意到连字符在 Chrome 上有效,但在 Firefox 上无效。奇怪但真实。除了代码 189 之外,还通过在上述 JS 文件中添加代码 173 来修复。

这让我想知道键盘实际发送的是什么。用于按下连字符键 (- _) 的 keydown 代码 173 或 189 显然不是由键盘本身发送的,而是由将 keyDown 事件发送到我的 JavaScript 应用程序的浏览器创建的。


0
投票

2023 年了,很长一段时间以来我一直在使用不同的解决方案。

它涉及使用隐藏的文本区域来获取键入的字符。这有点像黑客,但它在所有主要浏览器中都能完美运行,并且省去了使用 e.keye.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;
    });

请不要复制/粘贴此代码并期望它能够完美运行。我是凭记忆输入此内容,而不是从工作文件中复制它。我不记得将 tabIndex 设置为 -1 是否会阻止 .focus() 工作。我认为没问题,但请仔细检查一下。

© www.soinside.com 2019 - 2024. All rights reserved.