Element contentEditable Property - Javascript DOM

Javascript examples for DOM:Element contentEditable

  1. HOME
  2. Javascript
  3. DOM
  4. Element contentEditable

Description

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

Set the contentEditable property with the following Values

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

Return Value

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

The following code shows how to Set the content of a <p> element to be ediTable:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<body>

<p id="myP" contenteditable="true">Try to change this text.</p>

<button onclick="myFunction(this);">Disable content of p to be editable!</button>

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

<script>
function myFunction(button) {
    var x = document.getElementById("myP");
    if (x.contentEditable == "true") {
        x.contentEditable = "false";
        button.innerHTML = "Enable content of p to be editable!";
    } else {/*from  w  w  w.  j av  a 2  s  . co  m*/
        x.contentEditable = "true";
        button.innerHTML = "Disable content of p to be editable!";
    }
}
</script>

</body>
</html>

Related Tutorials