Check whether the content of an element is editable or not in HTML

HTML Web Development Front End Technology

The contenteditable attribute indicates whether or not an element's content is editable. If the content is found to be editable, the browser will allow editing by modifying its widgets.

This attribute must always take one of these two values below −

true, or an empty string − indicating that the content is editable
false − indicating that the content is not editable

If the attribute does not take any of the values mentioned above, it is declared an empty string and will, by default, become an editable content.

Note − If an element's contenteditable attribute is not set or not valid, its value will be inherited by the element from its parent; that means if the parent is editable, so is the element.

Syntax

HTMLElementObject.contentEditable=true|false

Following are the examples…

Example: with “true” attribute value

In the following example we are using contenteditable attribute and the value is set to “true” to make our text editable.


<!DOCTYPE html>
<html>
<body>
   <h1>It Is Editable,Try To Change This Text.</h1>
   <p contenteditable="true">Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
</body>
</html>

Output

On executing the above script, it enables the text to make changes through or make text editable as we mentioned the contenteditable to true.

Example: with “false” attribute value

In the following example we are using contenteditable attribute and the value is set to “true” to make our text editable.


<!DOCTYPE html>
<html>
<body>
   <h1>It Is Not Editable; Try To Change This Text.</h1>
   <p contenteditable="false">Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
</body>
</html>

Output

On executing the above script, it does not enable the text to make changes through or make text editable as we mentioned the contenteditable to false.

Example: Using Javascript

In the following example we are using contenteditable attribute value set to “true” to make our text editable.


<!DOCTYPE html>
<html>
<body>
   <h1>find out if text editable</h1>
   <p id="varma" contenteditable="true">We have established a Digital Content Marketplace to sell Video Courses and eBooks at a very nominal cost. You will have to register to avail these premium services.</p>
   <button onclick="myFunction()">Try it</button>
   <script>
      function myFunction() {
         var x = document.getElementById("varma").contentEditable;
      }
   </script>
</body>
</html>

Output

When the script is executed, it triggers the contenteditable and makes the text available to edit or make changes as we have set the contenteditable value to true.

Similar code in JavaScript is used to make the text not editable by using the “false” parameter to the contenteditable attribute.