`KeyboardEvent.key` Polyfill

(function() { // Key maps for the deprecated `KeyboardEvent.keyCode` var keys = { // control 8: 'backspace', 9: 'tab', 13: 'enter', 16: 'shift', 17: 'control', 18: 'alt', 19: 'pause', 20: 'capslock', // not working on `keypress` 27: 'escape', 33: 'pageup', 34: 'pagedown', 37: 'arrowleft', 38: 'arrowup', 39: 'arrowright', 40: 'arrowdown', 44: 'printscreen', // works only on `keyup` :( 45: 'insert', 46: 'delete', 91: 'meta', // <https://bugzilla.mozilla.org/show_bug.cgi?id=1232918> 93: 'contextmenu', // function 112: 'f1', 113: 'f2', 114: 'f3', 115: 'f4', 116: 'f5', 117: 'f6', 118: 'f7', 119: 'f8', 120: 'f9', 121: 'f10', 122: 'f11', 123: 'f12', // number 48: ['0', ')'], 49: ['1', '!'], 50: ['2', '@'], 51: ['3', '#'], 52: ['4', '$'], 53: ['5', '%'], 54: ['6', '^'], 55: ['7', '&'], 56: ['8', '*'], 57: ['9', '('], // alphabet 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', // symbol 32: ' ', 59: [';', ':'], 61: ['=', '+'], 173: ['-', '_'], 188: [',', '<'], 190: ['.', '>'], 191: ['/', '?'], 192: ['`', '~'], 219: ['[', '{'], 220: ['\\', '|'], 221: [']', '}'], 222: ['\'', '"'] }; Object.defineProperty(KeyboardEvent.prototype, '_key', { get: function() { var key = this.key || keys[this.which || this.keyCode]; if (typeof key === "object") { if (this.shiftKey) { key = key[1] || key[0]; } else { key = key[0]; } } return key.toLowerCase(); } }); })();
Just another polyfill for that `KeyboardEvent.key` property (lower-cased)

[javascript]
document.onkeydown = function(e) {
if (e.key) {
alert(e.key); // native
}
alert(e._key); // custom
};
[/javascript]

Read more: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

1 Response

Replace that `'_key'` part with `'key'` to overwrite the native `KeyboardEvent.key` value.

Write a comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.