Key-Codes as constants and helper functions to identify characters
NPM | Yarn |
---|---|
npm i -S js-keycodes |
yarn add js-keycodes |
import { keyCodes } from 'js-keycodes';
keyCodes.ENTER === 13;
// -> true
keyCodes.F12 === 123;
// -> true
window.addEventListener('keyup', (e) => {
if (e.keyCode === keyCodes.ENTER) {
console.log('ENTER was pressed');
}
});
Constant Name | Key Code value |
---|---|
ENTER | 13 |
ESC | 27 |
BACKSPACE | 8 |
TAB | 9 |
SHIFT | 16 |
CTRL | 17 |
ALT | 18 |
SPACE | 32 |
PAUSE | 19 |
PAGE_UP | 33 |
PAGE_DOWN | 34 |
END | 35 |
HOME | 36 |
LEFT | 37 |
UP | 38 |
RIGHT | 39 |
DOWN | 40 |
INSERT | 45 |
DELETE | 46 |
F1 | 112 |
F2 | 113 |
F3 | 114 |
F4 | 115 |
F5 | 116 |
F6 | 117 |
F7 | 118 |
F8 | 119 |
F9 | 120 |
F10 | 121 |
F11 | 122 |
F12 | 123 |
DOT | 190 |
DOT_NUMPAD | 110 |
COMA | 188 |
COMA_NUMPAD | 0 |
A | 65 |
B | 66 |
C | 67 |
D | 68 |
E | 69 |
F | 70 |
G | 71 |
H | 72 |
I | 73 |
J | 74 |
K | 75 |
L | 76 |
M | 77 |
N | 78 |
O | 79 |
P | 80 |
Q | 81 |
R | 82 |
S | 83 |
T | 84 |
U | 85 |
V | 86 |
W | 87 |
X | 88 |
Y | 89 |
Z | 90 |
ZERO | 48 |
ONE | 49 |
TWO | 50 |
THREE | 51 |
FOUR | 52 |
FIVE | 53 |
SIX | 54 |
SEVEN | 55 |
EIGHT | 56 |
NINE | 57 |
import * as KeyCodes from 'js-keycodes';
Or individual functions:
import { isLetter, isNumber } from 'js-keycodes';
import { isLetter, keyCodeToString } from 'js-keycodes';
window.addEventListener('keyup', (e) => {
if (isLetter(e.keyCode)) {
const char = keyCodeToString(e.keyCode);
console.log(`"${char}" was pressed`);
}
});
import { keyCodes } from 'js-keycodes';
const handleAnEvent = (event) => {
if (event.keyCode === keyCodes.ENTER) {
// Do your stuff here.
}
};
Return true if the keyCode is a number from 0
to 9
.
Return true if the keyCode is a letter from A
to Z
.
Return true if the keyCode represents an Arrow key ⬆️, ⬇️, ⬅️ or ➡️.
Return true if the keyCode represent ENTER
, SPACE
or TAB
Return true if the keyCode represent any of the F
buttons from F1
to F12
Return a string representation of the keyCode.
import { keyCodeToString } from 'js-keycodes';
const myLetter = keyCodeToString(90);
// -> 'Z'
const myNumber = keyCodeToString(50);
// '2'
Return a string representation based on the programmatic name of the keyCode
import { getKeyNameFromKeyCode } from 'js-keycodes';
const myLetter = getKeyNameFromKeyCode(90);
// -> 'Z'
const myNumber = getKeyNameFromKeyCode(50);
// -> 'TWO'
const myKey = getKeyNameFromKeyCode(13);
// -> 'ENTER'
const myF = getKeyNameFromKeyCode(121);
// -> 'F10'