HTML DOM Element contentEditable attribute

Definition and usage

contentEditable The attribute sets or returns whether the element content is editable.

Tip:You can also use the isContentEditable property to find out if the element content is editable.

See also:

isContentEditable property

HTML contenteditable-attribut

Instance

Example 1

This section is editable:

<p id="myP" contenteditable="true">I am editable.</p>

Returns true if "myP" is editable:

document.getElementById("myP").contentEditable;

Try it yourself

Example 2

Set the content of "myP" to be editable:

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

Try it yourself

Example 3

Toggle between editable and non-editable content:

cinst x = document.getElementById("myP");
if (x.contentEditable == "true") {
  x.contentEditable = "false";
  button.innerHTML = "Enable myP to be editable!";
}
  x.contentEditable = "true";
  button.innerHTML = "Disable myP be editable!";
}

Try it yourself

Syntax

Return the contentEditable attribute:

element.contentEditable

Set the contentEditable attribute:

element.contentEditable = value

Attribute value

Value Description
value
  • "true" - Content is editable
  • "false" - Content is not editable
  • "inherit" - Default. Editable if the parent element is editable

Return value

Type Description
String Returns true if the element is editable, otherwise false.

Browser support

element.contentEditable() It is a DOM Level 1 (1998) feature.

All web browsers fully support it:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Stöd 9-11 Stöd Stöd Stöd Stöd