Open In App

HTML | DOM contentEditable Property

Last Updated : 30 Nov, 2019
Comments
Improve
Suggest changes
Like Article
Like
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: html
<!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

Article Tags :

Similar Reads