Phenomenon
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.
Reproduction example
- Create a contenteditable div.
- Inside it, add a child element with
contenteditable="false":<div contenteditable="true"> <p>Editable text</p> <p contenteditable="false">This should not be editable</p> </div> - Try to edit the text in the child element with
contenteditable="false". - Observe whether editing is prevented.
Observed behavior
- In Chrome, child elements with
contenteditable="false"may still be editable. - The attribute is not consistently respected.
- Selection and editing may work within elements that should be read-only.
Expected behavior
- Elements with
contenteditable="false"should not be editable. - The attribute should be respected regardless of parent element state.
- Selection within read-only elements should be allowed, but editing should be prevented.