keydown-key
TypeScript icon, indicating that this package has built-in type declarations

1.4.1 • Public • Published

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.

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

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

Package Sidebar

Install

npm i keydown-key

Weekly Downloads

2,188

Version

1.4.1

License

MIT

Unpacked Size

7.87 kB

Total Files

8

Last publish

Collaborators

  • seawind543