Keydown-key NPM

keydown-key

An utility to normalize the KeyboardEvent.key especially during IME composition

Why need this?

To address the inconsistent behavior of IME across different browsers and platforms:

When selecting a CJK character using the Enter key with IME, the keyDownEvent.key value varies depending on the platform and browser combination.

IME `keyDown.key` Issue in Chrome on Mac

Example: Screenshot

Differences in `keyDown.key` Values with IME

Chrome:
- Mac: key === "Enter"
- Windows: key === "Process"
Firefox:
- key === "Process" on both Mac and Windows

This discrepancy can cause inconsistencies when handling keyboard events in web applications.

Playground

Installation

Install the latest version of keydown-key:
```
yarn add keydown-key
```
Apply keydown-key in your application

Example (Vanilla JS)

import keyDownKey from 'keydown-key';

// ... omit

function handleKeyDown(event: KeyboardEvent) { 
  const { key } = keyDownKey(event);

  switch(key) {
    case 'Enter':
      // Do what you want for real `Enter` key
      break;

    case 'Process':
      // The keyDown on "Enter" with IME will be here
      break;

    default: 
  }
}

inputBox.addEventListener('keydown', handleKeyDown);

Example (React JS)

import React from "react";
import keydownKey from "keydown-key";

const handleKeyDown = (event: React.KeyboardEvent) => {
  // use the `nativeEvent` attribute to get the browser KeyboardEvent
  // https://reactjs.org/docs/events.html#overview
  const { key } = keydownKey(event.nativeEvent);

  switch(key) {
    case 'Enter':
      // Do what you want for real `Enter` key
      break;

    case 'Process':
      // The keyDown on "Enter" with IME will be here
      break;

    default: 
  }
};

const App = () => {
  return <input onKeyDown={handleKeyDown} />;
};

export default App;