JavaScript使event.key警报event.keyCode的基本polyfill实现Chrome的现代化

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

本文关键字：event polyfill 实现 Chrome 现代化 key 警报 keyCode JavaScript      更新时间：2023-09-26

简而言之，如何使alert(event.key)返回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);
}

没有框架。

结合dandavis和我的评论，这里有一个处理的小错误的填充程序

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

现在可以在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);
}
相关文章：