An utility to normalize the KeyboardEvent.key especially during IME composition
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.
Example: Screenshot
-
Chrome:
-
Mac:
key === "Enter" -
Windows:
key === "Process"
-
Mac:
-
Firefox:
-
key === "Process"on both Mac and Windows
-
This discrepancy can cause inconsistencies when handling keyboard events in web applications.
- [Vanilla JS] https://codepen.io/seawind543/pen/gOWNVYR
- [React JS] https://codepen.io/seawind543/pen/xxdvZyE
- Install the latest version of keydown-key:
yarn add keydown-key- Apply
keydown-keyin your application
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);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;[1] IME https://en.wikipedia.org/wiki/Input_method
[2] CJK characters https://en.wikipedia.org/wiki/CJK_characters
[3] add support for SyntheticKeyboardEvent#isComposing https://github.com/facebook/react/issues/13104
[4] Support IME https://github.com/seawind543/react-token-input/issues/1#issuecomment-896190656
[5] Element: keydown event https://developer.mozilla.org/en-US/docs/Web/API/Document/keydown_event#ignoring_keydown_during_ime_composition