What is contenteditable?

Q: What is contenteditable?

The `contenteditable` attribute in HTML makes an element editable directly by the user in the browser. When applied, the user can click inside the element and modify its text or content without needing a form field. This feature is often used in WYSIWYG editors, note-taking apps, or anywhere inline editing is needed. Edit me! You can change this text directly in the browser. `contenteditable="true"`: Makes the element editable. `contenteditable="false"`: Ensures the element is not editable (even if its parent is). By default, if the attribute is present without a value, it is considered `true`. Useful for inline editing without using form inputs.

Difficulty: 6/10

rich-text-editing, browser-compatibility, accessibility

The contenteditable Attribute in HTML

The contenteditable attribute in HTML makes an element editable directly by the user in the browser. When applied, the user can click inside the element and modify its text or content without needing a form field. This feature is often used in WYSIWYG editors, note-taking apps, or anywhere inline editing is needed.

Example of Using contenteditable

Key Points About contenteditable

1
contenteditable="true": Makes the element editable.
2
contenteditable="false": Ensures the element is not editable (even if its parent is).
3
By default, if the attribute is present without a value, it is considered true.
4
Useful for inline editing without using form inputs.

Scenario Questions

0-2 years experience

1How would you make a div editable so users can type in it directly?
2What happens when a user pastes formatted text from Word into a contenteditable element?
3How do you retrieve the plain text a user typed into a contenteditable div, ignoring any HTML tags?

Follow-up Questions

How does contenteditable differ from <textarea> for plain text input?
What's the current status of execCommand and what replaces it?
How would you make a contenteditable region accessible to screen readers?