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 attribute must take one of the following values:
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.
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. |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | Yes | Yes | 3 | 5.5 | 9 | Yes |
contenteditable="events"
|
Yes | ? | No | No | ? | ? |
contenteditable="caret"
|
Yes | ? | No | No | ? | ? |
contenteditable="typing"
|
Yes | ? | No | No | ? | ? |
contenteditable="plaintext-only"
|
Yes | ? | No | No | ? | ? |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | Yes | Yes | Yes | 4 | Yes | Yes | ? |
contenteditable="events"
|
Yes | Yes | ? | No | ? | ? | ? |
contenteditable="caret"
|
Yes | Yes | ? | No | ? | ? | ? |
contenteditable="typing"
|
Yes | Yes | ? | No | ? | ? | ? |
contenteditable="plaintext-only"
|
Yes | Yes | ? | No | ? | ? | ? |
HTMLElement.contentEditable
and HTMLElement.isContentEditable
caret-color
property
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable