THE WORLD'S LARGEST WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

HTML DOM contentEditable Property

HTMLElement Object Reference 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

Examples

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


HTMLElement Object Reference Element Object