HTML DOM contentEditable Property
Example
Set the content of a <p> element to be editable:
document.getElementById("myP").contentEditable = true;
Try it yourself »
More "Try it Yourself" examples below.
Definition and Usage
The contentEditable property sets or returns whether the content of an element is editable or not.
Tip: You can also use the isContentEditable property to find out if the content of an element is editable or not.
Browser Support
The numbers in the table specifies the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| contentEditable | 11.0 | 6.0 | 3.5 | 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 |
Specifies whether the content of an element should be editable. Possible values:
|
Technical Details
| Return Value: | A String, returns true if the element is editable, otherwise it returns false |
|---|
More Examples
Example
Find out if a <p> element is editable or not:
var x = document.getElementById("myP").contentEditable;
The result of x will be:
true
Try it yourself »
Example
Toggle between the ability to edit the content of a <p> element:
var x = document.getElementById("myP");
if (x.contentEditable == "true")
{
x.contentEditable = "false";
button.innerHTML = "Enable content of p
to be editable!";
} else {
x.contentEditable = "true";
button.innerHTML = "Disable content of p to be editable!";
}
Try it yourself »
Related Pages
HTML reference: HTML contenteditable attribute
Element Object
