使用 jQuery keyup 命令如何区分“3”和“#”或“2”和“@”？答案

【问题标题】：With jQuery keyup command how can I tell the difference between "3" and "#" or "2" and "@"?使用 jQuery keyup 命令如何区分“3”和“#”或“2”和“@”？
【发布时间】：2014-01-21 19:57:28
【问题描述】：

标题几乎解释了它，但我只是想知道是否有一种方法可以使用 keyup 告诉我的代码对@做出反应，但不是 2...与 # 和 3 相同。

现在它为我提供了相同的 2 和 @ 键码，这会导致一些不良行为。

有人知道魔法吗？

更新 - 已解决

根据下面 cmets 中与 @RobW 和 @MonkeyZeus 的讨论，我了解到虽然有几种方法可以得到我需要的东西，但最直接的答案是使用 keypress 而不是 keyup。如果您出于某种原因必须使用 keyup，那么在下面的其他答案中，有一些很好的解决方案可以检测 shift 键。

谢谢，大卫

【问题讨论】：

2和@的keycode相同，需要检查shift键。
正如@crnlx 指出的，您可以检查shiftKey。您可以使用keydown 事件并调用String.fromCharCode 来获取keyCode 的值，也可以评估keyup 事件发生时的值。
当然，如果有人使用英国键盘，这一切都会失败！
@RobW 我希望我从未删除我的评论，你是对的。我认为要获得最佳的跨国和跨键盘功能，您需要检查<input> 字段中的实际字符来决定采取什么行动，而不是用键码等跳过箍
@MonkeyZeus 好吧，如果我真的想通过键盘检测“@”或“#”（不是复制粘贴），我不会使用这些方法中的任何一种，但 keypress 事件（不是keydown或keyup）。

标签： jquery keyup

【解决方案1】：

您必须检查 Shift 按下状态。

$("#id").on("keyup", function(e){
    var key = String.fromCharCode(e.which).toLowerCase();

    if (key == "3" && e.shiftKey) {
        // #
    } else if(key == "2" && e.shiftKey) {
        // @
    }

});

同样，您也可以查看e.ctrlKey、e.metaKey 和e.altKey。

【讨论】：

【解决方案2】：

根据cmets的讨论：

与其跳过键码检测和其他国际化问题，不如检查用户输入的文字字符，如<input> 框中所示。

使用element.selectionStart、element.selectionEnd 和substring() 的组合，您可以检查<input> 字段呈现的实际字符是什么。

Rob W 和 PeteR 对这篇文章表示认可。

【讨论】：

【解决方案3】：

只是为了在擂台上再扔一顶帽子。确定按键事件中的字符并不是 JavaScript 现在做得很好的事情。由于它的可变性，我宁愿不强制任何方法必须内联破译它，并将评估推迟到可以替换的另一种方法。

理想的方法是接收 KeyUp Event 作为参数并返回任何被按下的字符：我们称之为MapKeyPressToActualCharacter。

那么你的代码可能看起来超级干净：

$("#id").on("keyup", function(e){
    switch(MapKeyPressToActualCharacter(e)) {
        case "#":
            //handle #
            break;
        case "@":
            //handle @
            break;
    }
});

现在我们只需要弄清楚如何写MapKeyPressToActualCharacter。
这是基于get key char from keycode with shift modifier 的答案的实现：

function MapKeyPressToActualCharacter(event) {
    var isShiftKey = event.shiftKey;
    var characterCode = event.keyCode;
    var isAlphabetChar = characterCode >= 65 && characterCode <= 90;
    var specialChars = [8,9,13,16,17,18,20,27,91,92];
    var character = "";

    if (valueInArray(characterCode, specialChars)) {
        return false;
    }

    if (isAlphabetChar) {
        character = String.fromCharCode(characterCode);
    } else if (isShiftKey) {
        character = GetShiftedCharacters()[characterCode];
    } else {
        character = String.fromCharCode(characterCode);
    }
    return character;
}

function valueInArray(value, array) {
    return array.indexOf(value) > -1;
}

Working Demo in Fiddle

您还需要获取每个字符的映射，并使用 GetShiftedCharacters 方法进行转换：

function GetShiftedCharacters() {
    var characterMap = {32: " ",
                        48: ")",
                        49: "!",
                        50: "@",
                        51: "#",
                        52: "$",
                        53: "%",
                        54: "^",
                        55: "&",
                        56: "*",
                        57: "(",
                        59: ":",
                        107: "+",
                        109: "_",
                        188: "<",
                        190: ">",
                        191: "?",
                        192: "~",
                        219: "{",
                        220: "|",
                        221: "}",
                        222: "\\" };
    return characterMap;
}

这是一个可分发的 JS 文件：MapKeyPress.js

*注意，由于 MapKeyPress 函数调用array.indexOf，您应该使用polyfill 来扩展到旧版浏览器。这是一个名为 indexOfPolyFill.js 的 shiv，这是一个 example。

【讨论】：