HTML DOM Element contentEditable
Example
This paragraph is editable:
<p id="myP" contenteditable="true">I am editable.</p>
Returns true if "myP" is editable:
document.getElementById("myP").contentEditable;
Try it Yourself »
Set the content of "myP" to be editable:
document.getElementById("myP").contentEditable = "true";
Try it Yourself »
More examples below.
Description
The contentEditable property sets or returns if the content of an element is editable.
Syntax
Return the contentEditable property:
element.contentEditable
Set the contentEditable property:
ement.contentEditable = value
Parameters
| Parameter | Description |
| value |
"true" - The content is editable "false" - The content is not editable "inherit"- Default. Is editable if parent element is editable |
Return Value
| Type | Description |
| String | true if the element is editable, otherwise false. |
Toggle between content editable:
const x = document.getElementById("myP");
if (x.contentEditable == "true") {
x.contentEditable = "false";
button.innerHTML = "Enable myP to be editable!";
} else {
x.contentEditable = "true";
button.innerHTML = "Disable myP be editable!";
}
Try it Yourself »
Browser Support
element.contentEditable() is a DOM Level 1 (1998) feature.
It is fully supported in all browsers:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Yes | Yes | Yes | Yes | Yes | 9-11 |
