contenteditable
Makes an element's content editable right on the page.
Syntax
<div contenteditable>…</div>Parameters
| Parameter | Type | Description |
|---|---|---|
| contenteditable | true | false | plaintext-only | Whether the content is editable; `plaintext-only` — plain text without formatting. |
Examples
Click the text and change it:
<style>
[contenteditable] { border: 1px dashed #999; padding: 8px; }
[contenteditable]:focus { outline: 2px solid teal; }
</style>
<div contenteditable="true">Edit me — I am <b>editable</b>.</div>Notes
The content is not sent with a form — scripts read it via innerHTML or textContent. Rich-text editors are built on this attribute, but for ordinary text input <textarea> and <input> are a better fit.
See also
- spellcheck — Turns spell checking in a field on or off.
- <textarea> — A multi-line text field.
In the tutorial
- Attributes — How HTML attributes work, the global attributes id, class, title, lang, hidden and style, boolean attributes and data attributes.