readonly attribute does not prevent editing in contenteditable
OS: Linux Ubuntu 22.04 · Device: Desktop or Laptop Any · Browser: Firefox 120.0 · Keyboard: US
Open case →Scenario
readonly attribute does not prevent editing in contenteditable
The `readonly` attribute, which should prevent editing on form inputs, does not work on contenteditable regions in Firefox. Users can still edit the content even when `readonly` is set.
other
Scenario ID
scenario-readonly-attribute
Details
The readonly attribute, which should prevent editing on form inputs, does not work on contenteditable regions in Firefox. Users can still edit the content even when readonly is set.
References
- MDN: contenteditable global attribute - contenteditable documentation
- MDN: readonly attribute - readonly attribute documentation
- MDN: HTMLInputElement.readOnly - readOnly property
- Stack Overflow: Why does contenteditable false not work? - contenteditable=“false” issues
- MDN: aria-readonly - ARIA readonly attribute
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-0065-contenteditable-with-readonly | Linux Ubuntu 22.04 | Desktop or Laptop Any | Firefox 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: firefox
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: firefox
Caret position jumps unexpectedly after pasting content
After pasting content into a contenteditable region, the caret position does not end up at the expected location, sometimes jumping to the beginning of the pasted content or to an unexpected position.
1 case
Tags: firefox
contenteditable inheritance behavior is inconsistent
When a parent element has contenteditable="true" and a child element has contenteditable="false", the inheritance behavior is inconsistent across browsers. Some browsers allow editing in the child, while others correctly prevent it. The behavior may also differ when the child has contenteditable="inherit" or no contenteditable attribute.
1 case
Tags: readonly
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.
1 case
Tags: firefox
contenteditable in table cells causes layout issues
When a contenteditable region is inside a table cell (`<td>`), editing the content may cause layout issues in Firefox. The table may resize unexpectedly or the cell may overflow.
1 case
Comments & Discussion
Have questions, suggestions, or want to share your experience? Join the discussion below.