HTML DOM contentEditableProperty
Element ObjectExample
Set the content of the <p> element to be editable:
document.getElementById("myP").contentEditable = true;
Try it Yourself »
Definition and Usage
The contentEditable property is used to set or return whether the content of an element is editable.
Tip:You can also use theisContentEditableproperty to check whether the content of an element is editable.
Browser Support
The numbers in the table indicate the first browser version that supports this property.
| Property | |||||
|---|---|---|---|---|---|
| contentEditable | 11.0 | 5.5 | 3.0 | 3.2 | 10.6 |
Syntax
Return the contentEditable property:
HTMLElementObject.contentEditable
Set the contentEditable property:
HTMLElementObject.contentEditable=true|false
Property Values
| Value | Description |
|---|---|
| true|false | Describes whether the content of the element is editable. Possible values:
|
Technical Details
| Return value: | A Boolean value, returns true if the element is editable, otherwise returns false |
|---|
More Examples
Example
Check whether the <p> element is editable:
var x = document.getElementById("myP").contentEditable;
xThe output result is:
true
Try it Yourself »
Example
Toggle the editing state of the <p> element:
var x = document.getElementById("myP");
if (x.contentEditable == "true") {
x.contentEditable = "false";
button.innerHTML = "The p element content is editable!";
} else {
x.contentEditable = "true";
button.innerHTML = "The p element content is not editable!";
}
if (x.contentEditable == "true") {
x.contentEditable = "false";
button.innerHTML = "The p element content is editable!";
} else {
x.contentEditable = "true";
button.innerHTML = "The p element content is not editable!";
}
Try it Yourself »
Related Pages
HTML Reference:HTML contenteditable Attribute
Other Extensions