Key Code Constants

3.1.0 · active · verified Wed Apr 22

keycode-js is a JavaScript package providing a comprehensive set of constants for keyboard events, specifically mapping to KeyboardEvent.keyCode, KeyboardEvent.code, and KeyboardEvent.key properties. The current stable version is 3.1.0. The package maintains a steady release cadence, incorporating new key event codes and values while addressing compatibility and consistency across browser environments. A key differentiator is its provision of constants for all three KeyboardEvent properties, allowing developers to choose the most appropriate and future-proof method for handling keyboard input. It also ships with TypeScript types, enhancing developer experience in TypeScript projects, and offers direct support for Deno environments.

Common errors

```
TypeError: Cannot read properties of undefined (reading 'KEY_RETURN')
```
cause Attempting to use a default import `import KeyCode from 'keycode-js'` in an ES module context with `keycode-js` v2.0.0 or later.

fix Change the import statement to `import * as KeyCode from 'keycode-js';` or `import { KEY_RETURN } from 'keycode-js';`.
```
Error: `KeyCode` is not defined
```
cause Trying to use `KeyCode` constants in a browser `<script>` tag before the library is loaded, or if the global `KeyCode` object is not accessible in the current scope.

fix Ensure the `keycode-js` script tag (`<script src="https://unpkg.com/keycode-js@latest/dist/keycode.min.js"></script>`) is loaded before your script attempts to use `KeyCode`. In modules, ensure it's properly imported.

Warnings

breaking In v3.0.0, `keyCode` constants were updated. This included changes to previously Gecko-specific constants to align more closely with general web standards. If your application relied on older, Firefox-specific `keyCode` values, their behavior or expected constant values might have changed.
Fix: Review `KeyboardEvent.keyCode` usage. It's highly recommended to migrate to `KeyboardEvent.code` or `KeyboardEvent.key` with their corresponding `CODE_` or `VALUE_` constants for better cross-browser compatibility. If `keyCode` must be used, verify the new constant values against your expected behavior.
breaking Starting with v2.0.0, `keycode-js` no longer supports `default` imports (`import KeyCode from 'keycode-js'`) for ES2015+ modules. Attempting to use this syntax will result in an import error.
Fix: Update your import statements. Change `import KeyCode from 'keycode-js';` to `import * as KeyCode from 'keycode-js';` to import the module namespace, or use named imports like `import { KEY_RETURN } from 'keycode-js';` for individual constants.
deprecated The `KeyboardEvent.keyCode` property, which `keycode-js` provides `KEY_` constants for, is deprecated by the W3C and should be avoided in new web development. Modern alternatives include `KeyboardEvent.code` and `KeyboardEvent.key`.
Fix: Prioritize the use of `e.code` with `KeyCode.CODE_EXAMPLE` constants or `e.key` with `KeyCode.VALUE_EXAMPLE` constants for handling keyboard events. These offer more reliable and future-proof identification of keys.

Install

npm install keycode-js npm
yarn add keycode-js yarn
pnpm add keycode-js pnpm

Imports

KeyCode (wildcard import)
wrong:
```
import KeyCode from 'keycode-js';
```
correct:
```
import * as KeyCode from 'keycode-js';
```
Default imports for ES2015+ modules were removed in v2.0.0. Use `* as KeyCode` to import the module namespace object containing all constants.
KEY_RETURN (named import)
```
import { KEY_RETURN } from 'keycode-js';
```
Use named imports to bring in specific constants, which is often preferred for tree-shaking and clarity.
CODE_RETURN (named import)
```
import { CODE_RETURN } from 'keycode-js';
```
Use named imports for `KeyboardEvent.code` constants. These were added in v3.1.0.
KeyCode (CommonJS)
```
const KeyCode = require('keycode-js');
```
For CommonJS environments, the package exports its constants directly on the `module.exports` object.

Quickstart

Demonstrates how to import and use key code, key value, and key event constants from `keycode-js` within a browser's keyup event listener, showing both modern and deprecated approaches.

import * as KeyCode from 'keycode-js';

window.addEventListener('keyup', function(e) {
  // It's recommended to check 'code' or 'key' properties for modern browsers.
  // 'keyCode' is deprecated by the W3C.

  // Check the code value (e.g., 'Enter').
  if (e.code === KeyCode.CODE_RETURN) {
    console.log('It was the Return key using event.code.');
    return;
  }

  // OR, check the key value (e.g., 'Enter').
  if (e.key === KeyCode.VALUE_RETURN) {
    console.log('It was the Return key using event.key.');
    return;
  }

  // OR, check the keyCode value (e.g., 13) (deprecated).
  if (e.keyCode === KeyCode.KEY_RETURN) {
    console.log('It was the Return key using deprecated event.keyCode.');
    return;
  }

  console.log('It was any other key:', e.key, e.code, e.keyCode);
});

view raw JSON →