const keyCodes = {
// 0: {
// 'Key has no keycode',
// id: '',
// },
// 3: {
// 'break',
// id: '',
// },
8: {
// 'backspace / delete',
id: 'delete',
},
9: {
id: 'tab',
},
// 12: {
// 'clear',
// id: '',
// },
13: {
id: 'enter',
},
16: {
id: 'shift',
checkSide: true,
// DOM_KEY_LOCATION_LEFT
// DOM_KEY_LOCATION_RIGHT
},
17: {
id: 'control',
checkSide: true,
},
18: {
id: 'alt',
checkSide: true,
},
// 19: {
// 'pause/break',
// id: '',
// },
20: {
id: 'capsLock',
},
// 21: {
// 'hangul',
// id: '',
// },
// 25: {
// 'hanja',
// id: '',
// },
27: {
id: 'esc',
},
// 28: {
// 'conversion',
// id: '',
// },
// 29: {
// 'non-conversion',
// id: '',
// },
32: {
id: 'space',
},
// 33: {
// 'page up',
// id: '',
// },
// 34: {
// 'page down',
// id: '',
// },
// 35: {
// 'end',
// id: '',
// },
// 36: {
// 'home',
// id: '',
// },
37: {
id: 'arrowLeft',
},
38: {
id: 'arrowUp',
},
39: {
id: 'arrowRight',
},
40: {
id: 'arrowDown',
},
// 41: {
// 'select',
// id: '',
// },
// 42: {
// 'print',
// id: '',
// },
// 43: {
// 'execute',
// id: '',
// },
// 44: {
// 'print Screen',
// id: '',
// },
// 45: {
// 'insert',
// id: '',
// },
46: {
id: 'delete',
},
// 47: {
// 'help',
// id: '',
// },
48: {
id: '0',
},
49: {
id: '1',
},
50: {
id: '2',
},
51: {
id: '3',
},
52: {
id: '4',
},
53: {
id: '5',
},
54: {
id: '6',
},
55: {
id: '7',
},
56: {
id: '8',
},
57: {
id: '9',
},
58: {
// ':',
id: 'semicolon',
},
59: {
// 'semicolon (firefox), equals',
id: 'equals',
},
60: {
// '<',
id: 'comma',
},
61: {
// 'equals (firefox)',
id: 'equals',
},
// 63: {
// 'ß',
// id: '',
// },
64: {
// '@ (firefox)',
id: '2',
},
65: {
id: 'a',
},
66: {
id: 'b',
},
67: {
id: 'c',
},
68: {
id: 'd',
},
69: {
id: 'e',
},
70: {
id: 'f',
},
71: {
id: 'g',
},
72: {
id: 'h',
},
73: {
id: 'i',
},
74: {
id: 'j',
},
75: {
id: 'k',
},
76: {
id: 'l',
},
77: {
id: 'm',
},
78: {
id: 'n',
},
79: {
id: 'o',
},
80: {
id: 'p',
},
81: {
id: 'q',
},
82: {
id: 'r',
},
83: {
id: 's',
},
84: {
id: 't',
},
85: {
id: 'u',
},
86: {
id: 'v',
},
87: {
id: 'w',
},
88: {
id: 'x',
},
89: {
id: 'y',
},
90: {
id: 'z',
},
91: {
// 'Windows Key / Left ⌘ / Chromebook Search key',
id: 'cmdLeft',
},
92: {
// 'right window key',
id: 'cmdRight',
},
93: {
// 'Windows Menu / Right ⌘',
id: 'cmdRight',
},
// 95: {
// '// sleep',
// id: '',
// },
96: {
// 'numpad 0',
id: '0',
},
97: {
// 'numpad 1',
id: '1',
},
98: {
// 'numpad 2',
id: '2',
},
99: {
// 'numpad 3',
id: '3',
},
100: {
// 'numpad 4',
id: '4',
},
101: {
// 'numpad 5',
id: '5',
},
102: {
// 'numpad 6',
id: '6',
},
103: {
// 'numpad 7',
id: '7',
},
104: {
// 'numpad 8',
id: '8',
},
105: {
// 'numpad 9',
id: '9',
},
106: {
// 'multiply',
id: '8',
},
107: {
// 'add',
id: 'equals',
},
108: {
// 'numpad period (firefox)',
id: 'dot',
},
109: {
// 'subtract',
id: 'minus',
},
110: {
// 'decimal point',
id: 'dot',
},
111: {
// 'divide',
id: 'slash',
},
112: {
id: 'f1',
},
113: {
id: 'f2',
},
114: {
id: 'f3',
},
115: {
id: 'f4',
},
116: {
id: 'f5',
},
117: {
id: 'f6',
},
118: {
id: 'f7',
},
119: {
id: 'f8',
},
120: {
id: 'f9',
},
121: {
id: 'f10',
},
122: {
id: 'f11',
},
123: {
id: 'f12',
},
124: {
id: 'f13',
},
125: {
id: 'f14',
},
126: {
id: 'f15',
},
127: {
id: 'f16',
},
128: {
id: 'f17',
},
129: {
id: 'f18',
},
130: {
id: 'f19',
},
131: {
id: 'f20',
},
132: {
id: 'f21',
},
133: {
id: 'f22',
},
134: {
id: 'f23',
},
135: {
id: 'f24',
},
// 144: {
// 'num lock',
// id: '',
// },
// 145: {
// 'scroll lock',
// id: '',
// },
160: {
// '^',
id: '6',
},
161: {
// '!',
id: '1',
},
163: {
// '#',
id: '3',
},
164: {
// '$',
id: '4',
},
165: {
// 'ù',
id: 'u',
},
// 166: {
// 'page backward',
// id: '',
// },
// 167: {
// 'page forward',
// id: '',
// },
168: {
// 'refresh',
id: 'f5',
},
169: {
// 'closing paren (AZERTY)',
id: '0',
},
170: {
// '*',
id: '8',
},
171: {
// '~ + * key',
id: 'tilde',
},
// 172: {
// 'home key',
// id: '',
// },
173: {
// 'minus (firefox), mute/unmute',
id: 'minus',
},
174: {
// 'decrease volume level',
id: 'f10',
},
175: {
// 'increase volume level',
id: 'f11',
},
// 176: {
// 'next',
// id: '',
// },
// 177: {
// 'previous',
// id: '',
// },
// 178: {
// 'stop',
// id: '',
// },
179: {
// 'play/pause',
id: 'f8',
},
// 180: {
// 'e-mail',
// id: '',
// },
181: {
// 'mute/unmute (firefox)',
id: 'f10',
},
182: {
// 'decrease volume level (firefox)',
id: 'f11',
},
183: {
// 'increase volume level (firefox)',
id: 'f12',
},
186: {
// 'semi-colon / ñ',
id: 'semicolon',
},
187: {
// 'equal sign',
id: 'equals',
},
188: {
// 'comma',
id: 'comma',
},
189: {
// 'dash',
id: 'minus',
},
190: {
// 'period',
id: 'dot',
},
191: {
// 'forward slash / ç',
id: 'slash',
},
192: {
// 'grave accent / ñ / æ / ö',
id: 'tilde',
},
193: {
// '?, / or °',
id: 'slash',
},
194: {
// 'numpad period (chrome)',
id: 'dot',
},
219: {
// 'open bracket',
id: 'squareBracketLeft',
},
220: {
// 'back slash',
id: 'backslash',
},
221: {
// 'close bracket / å',
id: 'squareBracketRight',
},
222: {
// 'single quote / ø / ä',
id: 'apostrophe',
},
223: {
// '`',
id: 'tilde',
},
224: {
// 'left or right ⌘ key (firefox)',
id: 'cmd',
checkSide: true,
},
225: {
// 'altgr',
id: 'altRight',
},
// 226: {
// 'left back slash',
// id: '',
// },
// 230: {
// 'GNOME Compose Key',
// id: '',
// },
231: {
// 'ç',
id: 'c',
},
// 233: {
// 'XF86Forward',
// id: '',
// },
// 234: {
// 'XF86Back',
// id: '',
// },
// 240: {
// 'alphanumeric',
// id: '',
// },
// 242: {
// 'hiragana/katakana',
// id: '',
// },
// 243: {
// 'half-width/full-width',
// id: '',
// },
// 244: {
// 'kanji',
// id: '',
// },
// 255: {
// 'toggle touchpad',
// id: '',
// },
};
function getKeyElement(e) {
const key = keyCodes[e.keyCode];
if (key && key.id) {
let keySelector = `#Key--${ key.id }`;
if (key.checkSide && KeyboardEvent) {
if (e.location === KeyboardEvent.DOM_KEY_LOCATION_LEFT) {
keySelector += 'Left';
} else if (e.location === KeyboardEvent.DOM_KEY_LOCATION_RIGHT) {
keySelector += 'Right';
}
}
const keyElement = document.querySelector(keySelector);
return keyElement;
}
}
document.addEventListener('keydown', function(e) {
const keyElement = getKeyElement(e);
if (keyElement) {
keyElement.setAttribute('class', 'Key Key--active');
}
});
document.addEventListener('keyup', function(e) {
const keyElement = getKeyElement(e);
if (keyElement) {
keyElement.setAttribute('class', 'Key');
}
});
function removeActiveKeyClass() {
const keyElements = document.querySelectorAll('.Key--active');
for (let i = 0; i < keyElements.length; i++) {
keyElements[i].setAttribute('class', 'Key');
}
}
window.addEventListener('blur', removeActiveKeyClass);
!
