Package Exports

keydown-key
keydown-key/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (keydown-key) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

[Vanilla JS] https://codepen.io/seawind543/pen/gOWNVYR
[React JS] https://codepen.io/seawind543/pen/xxdvZyE

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;