使用 jQuery keyup 命令，我如何区分"3"和"#"或"2"和"@"？

Question

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

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

有人知道魔法吗？

更新 - 已解决

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

谢谢 大卫

Answer 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。

Answer 2

根据评论中的讨论：

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

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

表彰Rob W和PeteR的这篇文章。

Answer 3

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

理想的方法是将 KeyUpEvent作为参数并返回按下的任何字符：我们称之为MapKeyPressToActualCharacter。

然后你的代码可能看起来超级干净，如下所示：

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

现在我们只需要弄清楚如何写MapKeyPressToActualCharacter.
这是一个基于答案的实现，用于使用 shift 修饰符从键代码中获取键字符：

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;
}

小提琴工作演示

您还需要获取每个字符的映射，并且它与方法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，因此您应该使用填充代码扩展到较旧的浏览器。 这里有一个叫做indexOfPolyFill.js的shiv，这里有一个例子。