Javascript Reference - HTML DOM contentEditable Property

The contentEditable property sets or gets whether the content of an element is editable.

Browser Support


`contentEditable`	Yes	Yes	Yes	Yes	Yes

Syntax

Return the contentEditable property:

var v = HTMLElementObject.contentEditable

Set the contentEditable property:

HTMLElementObject.contentEditable=true|false

Property Values

Value	Description
true\|false	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

Return Value

A Boolean, returns true if the element is editable, otherwise it returns false.

Example

The following code shows how to set the content of a <p> element to be editable.


<!DOCTYPE html>
<html>
<body>
<p id="myP">test</p>
<button onclick="myFunction()">test</button>
<!-- w w  w .  jav  a 2 s . c  o m-->
<p id="demo"></p>

<script>
function myFunction() {
    document.getElementById("myP").contentEditable = true;
    document.getElementById("demo").innerHTML = "changed";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to find out if a <p> element is editable.


<!DOCTYPE html>
<html>
<body>
<p id="myP" contenteditable="true">editable</p>
<button onclick="myFunction()">test</button>
<p id="demo"></p>
<script>
function myFunction() {<!--from   w w  w  . j a  v a 2  s  .  c  o  m-->
    var x = document.getElementById("myP").contentEditable;
    document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows how to toggle editable state.


<!DOCTYPE html>
<html>
<body>
<!--  w  w w  . j a  va 2 s .c  o  m-->
<p id="myP" contenteditable="true">test</p>

<button onclick="myFunction(this);">test</button>

<p id="demo"></p>

<script>
function myFunction(button) {
    var x = document.getElementById("myP");
    if (x.contentEditable == "true") {
        x.contentEditable = "false";
        button.innerHTML = "editable!";
    } else {
        x.contentEditable = "true";
        button.innerHTML = "not editable!";
    }
}
</script>

</body>
</html>

The code above is rendered as follows: