beforeinput event is not supported in Safari
OS: macOS Ubuntu 22.04 · Device: Desktop or Laptop Any · Browser: Safari 120.0 · Keyboard: US
Open case →Scenario
beforeinput event is not supported in Safari
The beforeinput event, which is crucial for intercepting and modifying input before it's committed to the DOM, is not supported in Safari. This makes it difficult to implement custom input handling that works across all browsers.
other
Scenario ID
scenario-beforeinput-support
Details
The beforeinput event, which is crucial for intercepting and modifying input before it’s committed to the DOM, is not supported in Safari. This makes it difficult to implement custom input handling that works across all browsers.
References
- WebKit Blog: Enhanced Editing with Input Events - beforeinput implementation in Safari
- Can I Use: beforeinput event - Browser compatibility
- WebKit Bug 217692: beforeinput not fired for autocomplete - Autocomplete issues
- WebKit Bug 284769: beforeinput not fired for password autofill - Autofill issues
- WebKit Changes: Event order fix - beforeinput/textInput order correction
- WebKit Bug 166889: beforeinput order during IME composition - Composition event ordering
- W3C Input Events Issue #86: Event ordering - Specification discussion
- MDN: Element beforeinput event - Official documentation
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 |
|---|---|---|---|---|---|
| ce-0043-beforeinput-not-supported | macOS Ubuntu 22.04 | Desktop or Laptop Any | Safari 120.0 | 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: beforeinput, safari
insertParagraph preventDefault breaks IME composition state in Safari
In Safari desktop, when preventDefault() is called on keydown or beforeinput events for insertParagraph (Enter key), the IME composition state becomes corrupted. Subsequent text input fails to trigger proper input events, causing characters to not be inserted or composition to malfunction.
3 cases
Tags: beforeinput, safari
iOS dictation triggers duplicate input events after completion
On iOS, when using voice dictation to input text into contenteditable elements, the system may fire duplicate beforeinput and input events after the initial dictation completes. The text is split into words and events are re-fired, causing synchronization issues. Composition events do not fire during dictation, making it difficult to distinguish dictation from keyboard input.
1 case
Tags: beforeinput, safari
iOS Safari contenteditable — do not force re-render or change selection during input
On iOS Safari, input and beforeinput can fire with inputType 'insertText' multiple times (e.g. voice dictation) or with inputType undefined/null. Forcing re-render or changing selection during this flow desyncs the editor model from the DOM and can permanently break subsequent input.
1 case
Tags: beforeinput
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: beforeinput
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
Comments & Discussion
Have questions, suggestions, or want to share your experience? Join the discussion below.