JavaScript 为 event.key 警报制作基本的 polyfill event.key 现代化代码 Chrome

Question

简而言之，我如何使 alert(event.key) return 成为 event.keyCode？

我只需要知道如何使 alert(event.key); 变成 alert(event.keyCode); 因为一旦我到了那一步我就可以重新映射一切了。

event.keyCode 方法已被弃用。我从来没有搞砸过 JavaScript prototype 我的理解是它基本上用于为旧浏览器创建一个 polyfill（比如 Chrome 40 不支持 event.key 因为……？）。我不是在寻找要编码的整个函数，我只是想提醒 keyCode 因为从那里我可以找出映射代码并用工作代码更新这个问题。

我一直在试验的内容：

window.onkeydown = function(event)
{
 if (!event.key)
 {
  Object.defineProperty(String.prototype,'key',
  {
   enumerable: false,
   configurable: false,
   writable: false,
   value: function(event.keyCode)
   {
    alert('event.keyCode = '+event.keyCode);
   }
  });
 }

 alert('event.key = '+event.key);
}

没有框架。

Answer 1

结合 and 评论，这里是一个带有一点错误处理的shim

(function () {
    var ev;
    try {
        ev = new KeyboardEvent('keydown');
        if (!('key' in ev)) {
            if (!('keyCode' in ev))
                if (console && console.warn)
                    console.warn('Someting went wrong setting up keyboardEvent.key; no keyboardEvent.keyCode');
            Object.defineProperty(
                KeyboardEvent.prototype,
                'key',
                {get: function () {return this.keyCode;}}
            );
        }
    } catch (e) {
        if (console && console.warn)
            console.warn('Someting went wrong setting up keyboardEvent.key; an error was thrown');
    }
}());

Answer 2

现在可以在 Chrome 40 中工作并且我已经手动验证了每个 keyCode:

window.onkeydown = function(event)
{
 if (!event.key)
 {
  Object.defineProperty(KeyboardEvent.prototype,'key',
  {
   get: function ()
   {
    var r;
    var k = {'65':'a','66':'b','67':'c','68':'d','69':'e','70':'f','71':'g','72':'h','73':'i','74':'j','75':'k','76':'l','77':'m','78':'n','79':'o','80':'p','81':'q','82':'r','83':'s','84':'t','85':'u','86':'v','87':'w','88':'x','89':'y','90':'z','8':'Backspace','9':'Tab','13':'Enter','16':'Shift','17':'Control','18':'Alt','20':'CapsLock','27':'Esc','32':' ','33':'PageUp','34':'PageDown','35':'End','36':'Home','37':'Left','38':'Up','39':'Right','40':'Down','45':'Insert','46':'Del','48':'0','49':'1','50':'2','51':'3','52':'4','53':'5','54':'6','55':'7','56':'8','57':'9','91':'OS','92':'OS','93':'Menu','96':'0','97':'1','98':'2','99':'3','100':'4','101':'5','102':'6','103':'7','104':'8','105':'9','106':'*','107':'+','109':'-','110':'.','111':'/','112':'F1','113':'F2','114':'F3','115':'F4','116':'F5','117':'F6','118':'F7','119':'F8','120':'F9','121':'F10','122':'F11','123':'F12','144':'NumLock','145':'ScrollLock','186':':','187':'=','188':',','189':'-','190':'.','191':'/','192':'`','219':'[','220':'\','221':']','222':'\''}

    if (k[this.keyCode]) {r = k[this.keyCode];}
    else {r = 'Unknown Key';}
    return r;
   }
  });
 }

 alert('event.key = '+event.key);
}

JavaScript 为 event.key 警报制作基本的 polyfill event.key 现代化代码 Chrome

JavaScript make basic polyfill for event.key alert event.keyCode to modernize Chrome

javascript

google-chrome

polyfills