README
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
, thekeyDownEvent.key
has a different value whenselecting a CJK character
by press theEnter key
withIME
.
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
- Mac: key ===
- With IME, the keyDown.key value of Chrome and FireFox are different on Mac
- FireFox key ===
Process
on both Mac and Windows
- FireFox key ===
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
- 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