keydown-key

keydown-key

A utility function to normalize the KeyboardEvent.key especially during IME composition

Why need this?

To handle the different behaviors (with IME) between browsers on different platforms.

With the different platform + browser, the keyDownEvent.key has a different value when selecting a CJK character by pressing the Enter key with IME.

[IME keyDown.key issue] Chrome on Mac

• Example of the issue: https://imgur.com/63EJixc

• With IME, the keyDown.key value of Chrome is different on Mac and Windows

  • Mac: key === Enter
  • Windows: key === Process

• With IME, the keyDown.key value of Chrome and FireFox are different on Mac

  • FireFox key === Process on both Mac and Windows

Playground

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

Installation

1. Install the latest version of keydown-key:

yarn add keydown-key

1. 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: theNormalizedKey } = 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;

Reference

[1] IME https://en.wikipedia.org/wiki/Input_method

[2] CJK characters https://en.wikipedia.org/wiki/CJK_characters

License

MIT