Open In App

HTML | DOM contentEditable Property

Last Updated : 30 Nov, 2019
Improve
Improve
Like Article
Like
Save
Share
Report

The DOM contentEditable property is used to return a Boolean value where true means the content of an element is editable and false represents the content is not editable. This property is read-only.

Syntax:

  • Returns the contentEditable property:
    HTMLElementObject.contentEditable
  • Set the contentEditable property:
    HTMLElementObject.contentEditable = true | false

Return Value: This property returns a Boolean value:

  • True – It means the content of an element is editable.
  • False – It means that the content of an element is not editable.

Example:




<!DOCTYPE html> 
<html
  
<head
    <title
        DOM iscontentEditable Property 
    </title
</head
  
<body style="text-align: center"
    <h1 style="color:green"
            GeeksforGeeks 
        </h1
  
    <h2
        DOM contentEditable Property 
    </h2>
   
    <span id="P" contenteditable="true"
        Span 1 is editable.
    </span
    <br
  
    <button onclick="GFGFun()"
        Click
    </button
  
    <p id="pid"></p
    <p id="pid1"></p
  
    <script
        function GFGFun() { 
            var gfgvar = 
                document.getElementById("P").isContentEditable; 
          
            document.getElementById("pid").innerHTML = 
                "Span 1 is editable: " + gfgvar; 
        
    </script
</body
  
</html>


Output:

  • Before Click on Button:
  • After Click on Button:

Supported Browsers: The browser supported by contentEditable attribute are listed below:

  • Chrome
  • Firefox
  • Internet Explorer
  • Opera
  • Safari


Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads