HTML DOM contentEditable Propery

< Element Object

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: inherit - Default. The element's content is editable if its parent element is editable true - The content is editable false - The content is not editable

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 »

HTML reference: HTML contenteditable attribute

< Element Object