contenteditable="false" on child elements is not respected consistently
OS: Any Ubuntu 22.04 · Device: Desktop or Laptop Any · Browser: Chrome 120.0 · Keyboard: US
Open case →Scenario
contenteditable="false" on child elements is not respected consistently
When a contenteditable region contains child elements with contenteditable="false", the behavior is inconsistent. Some browsers allow editing within these elements, while others correctly prevent it.
other
Scenario ID
scenario-contenteditable-readonly
Details
When a contenteditable region contains child elements with contenteditable="false", the behavior is inconsistent. Some browsers allow editing within these elements, while others correctly prevent it.
References
- MDN: contenteditable global attribute - contenteditable documentation
- Stack Overflow: contenteditable false inside contenteditable true IE8 - IE8 issues
- Microsoft Learn: UWP WebView contenteditable false - WebView 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-0040-contenteditable-readonly | Any Ubuntu 22.04 | 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: chrome
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.
1 case
Tags: chrome
Text caret is invisible on position:relative elements
When editing content inside an element with `position:relative`, the text caret (cursor) is completely invisible. Text can be typed and appears in the editor, but there's no visual feedback of where the insertion point is located.
2 cases
Tags: chrome
Typing certain characters makes cursor jump on Chrome Mobile
On Chrome Mobile for Android, typing certain punctuation characters (commas, colons, semicolons, quotes, etc.) in the middle of a word causes the cursor to jump to the end of the word instead of staying at the insertion point.
2 cases
Tags: chrome
Caret jumps to end when deleting character next to non-editable element
When deleting the last character before a non-editable "pill" or tag element (contenteditable="false") in a contenteditable div in Chrome, the caret (cursor) jumps to the end of the entire contenteditable div instead of staying adjacent to the remaining content.
1 case
Tags: chrome
Arrow keys move by word instead of character when modifier is not pressed
In Chrome on Windows, arrow keys may move the caret by word instead of by character, even when no modifier keys are pressed. This makes precise cursor positioning difficult.
1 case
Comments & Discussion
Have questions, suggestions, or want to share your experience? Join the discussion below.