Easy Tutorial
❮ Prop Screen Availheight Prop Style Bordertopleftradius ❯

HTML DOM contentEditable Property

Element Object

Example

Set the content of a <p> element to be editable:

document.getElementById("myP").contentEditable = true;

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 the isContentEditable property to check if the content of an element is editable.


Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
contentEditable 11.0 5.5 3.0 3.2 10.6

Syntax

Return the contentEditable property:

Set the contentEditable property:

Property Values

Value Description
true false Describes whether the content of the element is editable. <br> <br> Possible values: inherit - Default. If the parent element is editable, the child element content is also editable. <br> true - Content is editable <br> false - Content is not editable

Technical Details

| Return Value: | Boolean, returns true if the element is editable, otherwise returns false | | --- | --- |


More Examples

Example

Check if a <p> element is editable:

var x = document.getElementById("myP").contentEditable;

x outputs:

true

Example

Toggle the edit status of a <p> element:

var x = document.getElementById("myP");
if (x.contentEditable == "true") {
    x.contentEditable = "false";
    button.innerHTML = "p element content is editable!";
} else {
    x.contentEditable = "true";
    button.innerHTML = "p element content is not editable!";
}

Related Pages

HTML Reference: HTML contenteditable Attribute


Element Object

❮ Prop Screen Availheight Prop Style Bordertopleftradius ❯