在任何键盘上检测Edge中的@ character onKeyUp

Question

在我的qwerty键盘上的大多数浏览器中，shift + 2的event.key是来自keyup键事件的“@”。但是，Edge报告event.key: "2"。所以我可以放下像

这样的东西

if(event.key == "2" && event.shiftKey){
  //code to execute when "@" key is down
}

直到有来自德国或匈牙利这样的国家/地区的键盘的用户，或许可能有很多其他人来到并希望我的代码在他们键入“@”字符而不是shift + 2时在Edge上工作时效果很好使用其他一些组合键。

如果某些键盘布局不会从shift + 2生成@字符，我如何可靠地检测Edge中onKeyUp事件中的“@”字符？

有没有办法检测用户是否正在使用具有备用布局的键盘，并且是否有一些布局列表，我可以从中创建一些可能非常长的switch语句来映射任何“shift + 2”代码每个键盘布局给出组合？

我需要在onKeyUp中工作，而不是onKeyDown。

这就是Edge给我的shift + 2 onkeyup。

[object KeyboardEvent]: {altKey: false, bubbles: true, cancelable: true, cancelBubble: false, charCode: 0...}
altKey: false
bubbles: true
cancelable: true
cancelBubble: false
charCode: 0
ctrlKey: false

currentTarget: Object
defaultPrevented: false
detail: 0
eventPhase: 3
isTrusted: true
key: "2"
keyCode: 50
location: 0
metaKey: false
repeat: false
returnValue: true
shiftKey: true

srcElement: Object

target: Object
timeStamp: 69676.72914431277
type: "keyup"

view: Object
which: 50

__proto__: Object

下面是德国键盘的图像。注意@ char的位置。我不想只支持德语和美语，我想支持任何键盘。

在onKeyUp的Edge上，event.charCode始终为0，即使在尝试键入@时shift键关闭时，event.key也为2，并且event.char始终未定义。使用Edge浏览器将此Codepen视为起始位置：https://codepen.io/glenpierce/pen/QmNQRq?editors=1111#

Answer 1

您可以测试一下：

编辑： 如果我们正在寻找@ char （它并不总是移位+2）

//in edge is char, the rest has character in key. In some cases you can use charCode
if(event.key == '@' || event.char == '@' || event.charCode == '@') {

 }

Answer 2

此方法在浏览器中存在兼容性问题，最安全的方法是使用keypress事件而不是keyup并检查：

document.addEventListener('keypress', function(event) {
  var at_code = event.DOM_VK_AT || 64;
  if (event.keyCode === at_code || event.charCode === at_code || event.key === '@')
    console.log("@ Pressed");
});

Answer 3

要支持所有带Edge（IE）的键盘，您需要使用KeyboardEvent.charCode属性中设置的值，而不是尝试解释键码。

此代码仅适用于Edge＆amp;铬：

document.addEventListener('keyup', function(event) {
    if (event.charCode === '@') {
        //
    }
});

但为了支持所有浏览器，我会使用：

document.addEventListener('keyup', function(event) {
    if (event.charCode === '@' || event.key === '@' || event.char === '@') {
        //
    }
});

来源：KeyboarEvent.keyCode（已弃用）和KeyboardEvent.key

Answer 4

您可以尝试这样的正则表达式

$(".detectAt").on("keyup", function(){
      e = e || event;
    var regex= /[^@]/i;

   return regex.test(String.fromCharCode(e.charCode || e.keyCode));
});