Baseline typing and composition in a simple contenteditable region
OS: Any Any · Device: Desktop or Laptop Any · Browser: Chrome Latest · Keyboard: US
Open case →Scenario
Baseline typing and composition in a simple contenteditable region
This case describes a baseline scenario for inspecting how a plain `contenteditable` region behaves
ime
Scenario ID
scenario-baseline
Details
This case describes a baseline scenario for inspecting how a plain contenteditable region behaves
with typing, composition, and basic navigation keys.
References
- W3C: contenteditable specification - contenteditable states
- MDN: contenteditable global attribute - plaintext-only mode
- Web.dev: contenteditable plaintext-only baseline - Browser support
- Firefox Bug 1186799: IME composition commit issues - Composition bugs
Scenario flow
Visual view of how this scenario connects to its concrete cases and environments. Nodes can be dragged and clicked.
Variants
Each row is a concrete case for this scenario, with a dedicated document and playground.
| Case | OS | Device | Browser | Keyboard | Status |
|---|---|---|---|---|---|
| example-baseline | Any Any | Desktop or Laptop Any | Chrome Latest | US | draft |
Cases
Open a case to see the detailed description and its dedicated playground.
Related Scenarios
Other scenarios that share similar tags or category.
Tags: composition
beforeinput and input events have different inputType values
During IME composition or in certain browser/IME combinations, the beforeinput event may have a different inputType than the corresponding input event. For example, beforeinput may fire with insertCompositionText while input fires with deleteContentBackward. This mismatch can cause handlers to misinterpret the actual DOM change and requires storing beforeinput's targetRanges for use in input event handling.
1 case
Tags: composition
Selection mismatch between beforeinput and input events
The selection (window.getSelection()) in beforeinput events can differ from the selection in corresponding input events. This mismatch can occur during IME composition, text prediction, or when typing adjacent to formatted elements like links. The selection in beforeinput may include adjacent formatted text, while input selection reflects the final cursor position.
1 case
Tags: composition
Composition event lifecycle inconsistencies across browsers
Analysis of how out-of-order or missing composition events disrupt editor state synchronization.
2 cases
Tags: composition
getTargetRanges() returns empty array in beforeinput events
The getTargetRanges() method in beforeinput events may return an empty array or undefined in various scenarios, including text prediction, certain IME compositions, or specific browser/device combinations. When getTargetRanges() is unavailable, developers must rely on window.getSelection() as a fallback, but this may be less accurate.
1 case
Tags: composition
IME composition causes duplicate text in headings (WebKit only)
When using IME to input CJK text in heading elements (H1, H2, etc.) in WebKit browsers, pressing Space to confirm composition causes both the raw Pinyin buffer AND the confirmed characters to appear together.
1 case
Comments & Discussion
Have questions, suggestions, or want to share your experience? Join the discussion below.