autofocus attribute does not work on contenteditable
OS: Windows 11 · Device: Desktop or Laptop Any · Browser: Chrome 120.0 · Keyboard: US
Open case →Scenario
autofocus attribute does not work on contenteditable
The autofocus attribute, which automatically focuses form inputs on page load, does not work on contenteditable elements. There is no built-in way to automatically focus a contenteditable region when a page loads.
focus
Scenario ID
scenario-autofocus-behavior
Details
The autofocus attribute, which automatically focuses form inputs on page load, does not work on contenteditable elements. There is no built-in way to automatically focus a contenteditable region when a page loads.
References
- WHATWG HTML: autofocus attribute - autofocus specification
- MDN: HTMLElement.autofocus - autofocus property documentation
- Stack Overflow: Can I use autofocus on contenteditable? - Focus solutions
- Stack Overflow: WebView with contenteditable cannot be focused programmatically - WebView focus issues
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-0069-contenteditable-with-autofocus | Windows 11 | Desktop or Laptop Any | Chrome 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: focus, chrome, windows
Fullscreen API may affect contenteditable focus and selection
When a contenteditable element enters or exits fullscreen mode using the Fullscreen API, focus and selection may be lost. The caret position may reset, and editing may be disrupted.
1 case
Tags: focus, chrome
WebKit contenteditable Focus Bug
A known bug in WebKit browsers prevents focus from transferring correctly from contenteditable elements to non-editable elements. A workaround involves using a hidden input field to manage focus transitions.
1 case
Tags: focus
Focus is lost when clicking on certain elements within contenteditable
When a contenteditable region contains interactive elements (buttons, links, etc.), clicking on these elements causes the contenteditable to lose focus. This interrupts the editing flow and may cause the caret to disappear.
1 case
Tags: focus
Programmatic focus selects all content
In Chrome and Safari, calling focus() on a contenteditable div can select the entire content instead of placing the cursor at the beginning, as observed in Firefox and IE.
1 case
Tags: focus
Nested contenteditable elements cause focus and selection issues
When a contenteditable element contains another contenteditable element, focus behavior becomes unpredictable. Clicking on the nested element may not properly focus it, and selection ranges may span across both elements incorrectly.
1 case
Comments & Discussion
Have questions, suggestions, or want to share your experience? Join the discussion below.