What is an IME?
An Input Method Editor (IME) is a software component that allows users to enter characters that are not directly available on their keyboard. Common examples include:
- Japanese IME: Converts romanized input (romaji) into hiragana, katakana, or kanji
- Korean IME: Combines individual jamo characters into complete syllables
- Chinese IME: Converts pinyin or other phonetic input into Chinese characters
- Vietnamese IME: Adds diacritical marks to base characters
Composition events
When using an IME, the input process involves multiple stages tracked by composition events:
-
compositionstart– Fires when the user starts composing (e.g., begins typing in Japanese) -
compositionupdate– Fires repeatedly as the composition changes (e.g., as candidate characters appear) -
compositionend– Fires when the composition is finalized (e.g., user selects a kanji)
element.addEventListener('compositionstart', () => {
console.log('Composition started');
});
element.addEventListener('compositionupdate', (e) => {
console.log('Composing:', e.data);
});
element.addEventListener('compositionend', (e) => {
console.log('Composition ended:', e.data);
});Common issues
Enter key during composition
Pressing Enter during IME composition may cancel the composition instead of committing it. This breaks the expected workflow for users.
See cases: scenario-ime-enter-breaks
Backspace granularity
Backspace may delete entire composed syllables instead of individual characters, making fine-grained editing difficult.
See cases: scenario-ime-backspace-granularity
Space key during composition
The Space key may be ignored or commit composition inconsistently during IME input, depending on the browser and OS.
See cases: scenario-space-during-composition
Undo during composition
Undo operations during active composition may clear more text than expected, including text that was already committed.
See cases: scenario-undo-with-composition
Browser differences
Event timing: The timing and order of composition events varies significantly between browsers, especially when special keys (Enter, Backspace) are pressed during composition.
IME candidate window: The position and behavior of the IME candidate window (showing possible character conversions) differs across browsers and may not align correctly with the caret.
Composition events missing: Some IMEs may not fire composition events consistently, or events may fire in unexpected orders, making it difficult to track the composition state.