keydown-key

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

Usage no npm install needed!

<script type="module">
  import keydownKey from 'https://cdn.skypack.dev/keydown-key';
</script>

README

NPM

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.

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

[IME keyDown.key issue] Chrome on Mac Example: 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

Installation

  1. Install the latest version of keydown-key:
yarn add keydown-key
  1. At this point you can import keydown-key in your application by:
import keyDownKey from 'keydown-key';

// ... omit

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

  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);

Reference

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

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

License

MIT