contenteditable
contenteditable turns an element into an editable region. It can support inline editing or rich text authoring, but it also introduces complexity around selection, sanitization, and predictable behavior.
Overview
contenteditable turns an element into an editable region. It can support inline editing or rich text authoring, but it also introduces complexity around selection, sanitization, and predictable behavior.
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 |
Syntax
<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.
Related links
Powered by web-features