(function(w, d) {
// 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: 'os',
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.hasOwnProperty('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();
}
});
})(window, document);
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
[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
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.