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

Question

在我的 qwerty 键盘上的大多数浏览器中，event.key 的 shift + 2 是来自 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 中的边沿，event.charCode 始终为 0，event.key 为 2，即使在尝试键入 @ 时按下 shift 键，并且 event.char 始终未定义。将此 Codepen 视为使用 Edge 浏览器的起点：https://codepen.io/glenpierce/pen/QmNQRq?editors=1111#

Answer 1

你可以测试一下：

编辑： 如果我们正在寻找@char （它并不总是 shift + 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 和 Chrome：

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