contenteditable
The contenteditable global attribute is an enumerated attribute indicating if the element should be editable by the user. If so, the browser modifies its widget to allow editing.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 3 | ≤4 | 18 | ≤3.2 | |
| DOM API | ||||||
| The contentEditable property of the HTMLElement interface specifies whether or not the element is editable. | 1 | 12 | 3 | 3 | 18 | 1 |
| The HTMLElement.isContentEditable read-only property returns a boolean value that is true if the contents of the element are editable; otherwise it returns false. | 1 | 12 | 4 | 3 | 18 | 1 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
HTML
<div contenteditable="true">
This section is editable. Click to edit.
</div>
<!-- plaintext-only で書式なしテキストのみ -->
<div contenteditable="plaintext-only">
Only plain text can be edited
</div>Live demo
Use cases
-
Inline edits
Allow users to rename a title, tweak a table cell, or edit a short note without leaving the current context.
-
Simple rich text input
A lightweight note-taking surface can start with contenteditable before a heavier editor stack is justified.
Cautions
- Browser behavior around pasted content, line breaks, and formatting can differ, so test the exact editing rules you need.
- Never trust edited HTML as safe by default. Sanitize and validate before saving or rendering elsewhere.
Accessibility
- Editable regions need clear instructions, visible focus styles, and an accessible name that explains what the user is editing.
- If formatting tools exist, make their effects and current state perceivable without relying on sight alone.