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.
Try it
The attribute must take one of the following values:
true
or an empty string, which indicates that the element is editable.false
, which indicates that the element is not editable.plaintext-only
, which indicates that the element's raw text is editable, but rich text formatting is disabled.
If the attribute is given without a value, like <label contenteditable>Example Label</label>
, its value is treated as an empty string.
If this attribute is missing or its value is invalid, its value is inherited from its parent element: so the element is editable if its parent is editable.
Note that although its allowed values include true
and false
, this attribute is an enumerated one and not a Boolean one.
You can set the color used to draw the text insertion caret with the CSS caret-color
property.
Elements that are made editable, and therefore interactive, by using the contenteditable
attribute can be focused. They participate in sequential keyboard navigation. However, elements with the contenteditable
attribute nested within other contenteditable
elements are not added to the tabbing sequence by default. You can add the nested contenteditable
elements to the keyboard navigation sequence by specifying the tabindex
value (tabindex="0"
).
Specifications
Specification |
---|
HTML Standard # attr-contenteditable |
Browser compatibility
BCD tables only load in the browser
See also
- All global attributes
HTMLElement.contentEditable
andHTMLElement.isContentEditable
- The CSS
caret-color
property - HTMLElement
input
event