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.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
The attribute must take one of the following values:
- true or the empty string, which indicates that the element must be editable;
- false, which indicates that the element must not be editable.
If this attribute is not set, its default value is inherited from its parent element.
This attribute is an enumerated one and not a Boolean one. This means that the explicit usage of one of the values true, false or the empty string is mandatory and that a shorthand like <label contenteditable>Example Label</label>
is not allowed. The correct usage is <label contenteditable="true">Example Label</label>
.
You can set the color used to draw the text insertion caret with the CSS caret-color
property.
Specifications
Specification | Status | Comment |
---|---|---|
HTML Editing APIs The definition of 'contenteditable' in that specification. |
Editor's Draft | Adds "events", "caret", "typing", "plaintext-only" |
HTML Living Standard The definition of 'contenteditable' in that specification. |
Living Standard | No change from latest snapshot, HTML 5.2 |
HTML 5.2 The definition of 'contenteditable' in that specification. |
Recommendation | Snapshot of HTML Living Standard, no change from HTML 5.1 |
HTML 5.1 The definition of 'contenteditable' in that specification. |
Recommendation | Snapshot of HTML Living Standard, no change from HTML5 |
HTML5 The definition of 'contenteditable' in that specification. |
Recommendation | Snapshot of HTML Living Standard, initial definition. |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
contenteditable | Chrome Full support Yes | Edge Full support Yes | Firefox Full support 3 | IE Full support 5.5 | Opera Full support 9 | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
contenteditable="caret" | Chrome Full support Yes | Edge ? | Firefox No support No | IE No support No | Opera Full support Yes | Safari ? | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android No support No | Opera Android ? | Safari iOS ? | Samsung Internet Android Full support Yes |
contenteditable="events" | Chrome Full support Yes | Edge ? | Firefox No support No | IE No support No | Opera Full support Yes | Safari ? | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android No support No | Opera Android ? | Safari iOS ? | Samsung Internet Android Full support Yes |
contenteditable="plaintext-only" | Chrome Full support Yes | Edge ? | Firefox No support No | IE No support No | Opera Full support Yes | Safari ? | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android No support No | Opera Android ? | Safari iOS ? | Samsung Internet Android Full support Yes |
contenteditable="typing" | Chrome Full support Yes | Edge ? | Firefox No support No | IE No support No | Opera Full support Yes | Safari ? | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android No support No | Opera Android ? | Safari iOS ? | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.