├── .gitignore
├── package.json
├── LICENSE
├── index.html
├── README.md
└── index.js
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | npm-debug.log
4 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "keyboardevent-key-polyfill",
3 | "version": "1.0.1",
4 | "description": "polyfill for `KeyboardEvent.prototype.key`",
5 | "main": "index.js",
6 | "author": {
7 | "name": "Chris Van",
8 | "url": "https://twitter.com/cvanw/"
9 | },
10 | "license": "MIT",
11 | "homepage": "https://github.com/cvan/keyboardevent-key-polyfill/",
12 | "repository": "cvan/keyboardevent-key-polyfill",
13 | "bugs": {
14 | "url": "https://github.com/cvan/keyboardevent-key-polyfill/issues"
15 | },
16 | "keywords": [
17 | "polyfill",
18 | "event",
19 | "keyboard",
20 | "keyboard-event",
21 | "key",
22 | "key-event",
23 | "client-side",
24 | "browser"
25 | ]
26 | }
27 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License
2 |
3 | Copyright © 2015 Chris Van.
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | keyboardevent-key-polyfill demo
6 |
14 |
15 |
16 |
17 | keyboardevent-key-polyfill demo
18 | Press any key
19 |
20 |
21 |
22 |
35 |
36 |
37 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # keyboardevent-key-polyfill
2 |
3 | Polyfill for `KeyboardEvent.prototype.key`.
4 |
5 | Firefox has already shipped with this for a while, but this will normalise it for other browsers (e.g., Chrome).
6 |
7 |
8 | ## Example
9 |
10 | __[View Demo](https://cvan.io/keyboardevent-key-polyfill/)__
11 |
12 |
13 |
14 | Say goodbye to this:
15 |
16 | ```js
17 | document.addEventListener('keydown', function (e) {
18 | console.log('Code of key pressed:', e.which || e.keyCode); // 39
19 | });
20 | ```
21 |
22 | And hello to this:
23 |
24 | ```js
25 | document.addEventListener('keydown', function (e) {
26 | console.log('Name of key pressed:', e.key); // ArrowRight
27 | });
28 | ```
29 |
30 | ## Usage
31 |
32 | ### From standalone script
33 |
34 | Just drop the script on your page and call the `polyfill` method.
35 |
36 | ```html
37 |
38 |
39 | ```
40 |
41 | If you're using AMD:
42 |
43 | ```js
44 | require('keyboardevent-key-polyfill').polyfill();
45 | ```
46 |
47 | ### From npm (Node/Browserify/WebPack)
48 |
49 | Install from [npm](https://www.npmjs.com/package/keyboardevent-key-polyfill):
50 |
51 | ```bash
52 | npm install keyboardevent-key-polyfill
53 | ```
54 |
55 | Then require the CommonJS module for use with Browserify/WebPack:
56 |
57 | ```js
58 | require('keyboardevent-key-polyfill').polyfill();
59 | ```
60 |
61 | ## License
62 |
63 | [MIT](LICENCSE)
64 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | /* global define, KeyboardEvent, module */
2 |
3 | (function () {
4 |
5 | var keyboardeventKeyPolyfill = {
6 | polyfill: polyfill,
7 | keys: {
8 | 3: 'Cancel',
9 | 6: 'Help',
10 | 8: 'Backspace',
11 | 9: 'Tab',
12 | 12: 'Clear',
13 | 13: 'Enter',
14 | 16: 'Shift',
15 | 17: 'Control',
16 | 18: 'Alt',
17 | 19: 'Pause',
18 | 20: 'CapsLock',
19 | 27: 'Escape',
20 | 28: 'Convert',
21 | 29: 'NonConvert',
22 | 30: 'Accept',
23 | 31: 'ModeChange',
24 | 33: 'PageUp',
25 | 34: 'PageDown',
26 | 35: 'End',
27 | 36: 'Home',
28 | 37: 'ArrowLeft',
29 | 38: 'ArrowUp',
30 | 39: 'ArrowRight',
31 | 40: 'ArrowDown',
32 | 41: 'Select',
33 | 42: 'Print',
34 | 43: 'Execute',
35 | 44: 'PrintScreen',
36 | 45: 'Insert',
37 | 46: 'Delete',
38 | 48: ['0', ')'],
39 | 49: ['1', '!'],
40 | 50: ['2', '@'],
41 | 51: ['3', '#'],
42 | 52: ['4', '$'],
43 | 53: ['5', '%'],
44 | 54: ['6', '^'],
45 | 55: ['7', '&'],
46 | 56: ['8', '*'],
47 | 57: ['9', '('],
48 | 91: 'OS',
49 | 93: 'ContextMenu',
50 | 144: 'NumLock',
51 | 145: 'ScrollLock',
52 | 181: 'VolumeMute',
53 | 182: 'VolumeDown',
54 | 183: 'VolumeUp',
55 | 186: [';', ':'],
56 | 187: ['=', '+'],
57 | 188: [',', '<'],
58 | 189: ['-', '_'],
59 | 190: ['.', '>'],
60 | 191: ['/', '?'],
61 | 192: ['`', '~'],
62 | 219: ['[', '{'],
63 | 220: ['\\', '|'],
64 | 221: [']', '}'],
65 | 222: ["'", '"'],
66 | 224: 'Meta',
67 | 225: 'AltGraph',
68 | 246: 'Attn',
69 | 247: 'CrSel',
70 | 248: 'ExSel',
71 | 249: 'EraseEof',
72 | 250: 'Play',
73 | 251: 'ZoomOut'
74 | }
75 | };
76 |
77 | // Function keys (F1-24).
78 | var i;
79 | for (i = 1; i < 25; i++) {
80 | keyboardeventKeyPolyfill.keys[111 + i] = 'F' + i;
81 | }
82 |
83 | // Printable ASCII characters.
84 | var letter = '';
85 | for (i = 65; i < 91; i++) {
86 | letter = String.fromCharCode(i);
87 | keyboardeventKeyPolyfill.keys[i] = [letter.toLowerCase(), letter.toUpperCase()];
88 | }
89 |
90 | function polyfill () {
91 | if (!('KeyboardEvent' in window) ||
92 | 'key' in KeyboardEvent.prototype) {
93 | return false;
94 | }
95 |
96 | // Polyfill `key` on `KeyboardEvent`.
97 | var proto = {
98 | get: function (x) {
99 | var key = keyboardeventKeyPolyfill.keys[this.which || this.keyCode];
100 |
101 | if (Array.isArray(key)) {
102 | key = key[+this.shiftKey];
103 | }
104 |
105 | return key;
106 | }
107 | };
108 | Object.defineProperty(KeyboardEvent.prototype, 'key', proto);
109 | return proto;
110 | }
111 |
112 | if (typeof define === 'function' && define.amd) {
113 | define('keyboardevent-key-polyfill', keyboardeventKeyPolyfill);
114 | } else if (typeof exports !== 'undefined' && typeof module !== 'undefined') {
115 | module.exports = keyboardeventKeyPolyfill;
116 | } else if (window) {
117 | window.keyboardeventKeyPolyfill = keyboardeventKeyPolyfill;
118 | }
119 |
120 | })();
121 |
--------------------------------------------------------------------------------