HTML DOM isContentEditable Property

Last Updated : 15 Jun, 2023

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

Syntax:

Object.isContentEditable

Return Value: This property returns a boolean value.

true means that the content of an element is editable.
false means that the content of an element is not editable.

Example: In this example, we will use the isContentEditable property

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>
        DOM iscontentEditable Property
    </title>
</head>
  
<body style="text-align: center">
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <h2>
        DOM iscontentEditable Property
    </h2>
    <span id="P" contenteditable="true">
        Span 1 is editable.

    </span>
    <span id="P1">
        Span 2 is non editable.
    </span>
    <br>
    <br>
    <button onclick="myFunction()">
        Click me!
    </button>
    <p id="d"></p>
    <p id="d1"></p>
  
    <script>
        function myFunction() {
            let x =
                document.getElementById("P").isContentEditable;
            let y =
                document.getElementById("P1").isContentEditable;
            document.getElementById("d").innerHTML =
                "Span 1 is editable: " + x;
            document.getElementById("d1").innerHTML =
                "Span 2 is editable: " + y;
        }
    </script>
</body>
  
</html>

Output:

Supported Browsers: The browser supported by the isContentEditable property are listed below:

Google Chrome 1.0 and above
Edge 12.0 and above
Internet Explorer 5.5 and above
Firefox 4.0 and above
Opera 12.1 and above
Safari 3.0 and above

V

Vishal Chaudhary 2

Improve

Article Tags :

Similar Reads

HTML DOM button Object

The button object in HTML is used to represent a <button> element. The getElementById() method is used to get the button object. Property Values:Property ValuesDescriptionautofocusSets or returns whether a button should automatically get focused on page load.defaultValueSets or returns the def

HTML DOM scrollLeft Property

HTML DOM scrollLeft property is used to return or set the number of pixels an element i.e. scrolled horizontally. If the content of the element doesn't generate a scroll bar, then its scrollLeft value is 0;Â Syntax: It returns the scrollLeft property.element.scrollLeftIt is used to set the scrollLef

HTML DOM scrollHeight Property

The DOM scrollHeight property is used to return the height of an element. This property includes padding and also content that is not visible on the screen due to overflow but does not include a border, scrollbar, or margin. It is a read-only property. Syntax: element.scrollHeight Return Value: It r

HTML DOM lastElementChild Property

The DOM lastElementChild property is used to return the last child element of the specified element or null if there is no last element. It is similar to the lastChild property but the difference is that the lastChild property returns all last-child nodes i.e. it includes text and comment nodes as w

HTML DOM hasAttributes() Method

The HTML DOM hasAttribute() method is a boolean function that returns either true or false but not both. This method returns a true value if the element contains an attribute otherwise, it returns false. It is very useful to know whether the element in the document has attributes or not. Syntax: nod

HTML DOM contains() Method

The contains() method is used to find whether the specified node is a descendant of the given node. This descendant can be a child, grandchild, great-grandchild, and so on. Syntax: node.contains( otherNode ) Parameters: The â€œothernodeâ€ in the syntax is the parameter required in this function. Return

HTML DOM offsetWidth Property

The DOM offsetWidth property is used to return the layout width of an element as an integer. It is measured in pixels. It includes width, border, padding, and vertical scrollbars but not margin. If the element is hidden then it returns 0. Syntax: element.offsetWidth Return Value: It returns the layo

HTML DOM Style borderRadius Property

The DOM Style borderRadius Property is used to set or return the four different borderRadius properties such as borderTopRightRadius, borderBottomRightRadius, and borderBottomLeftRadius of an element. It is used to add a rounded corner in an element. Syntax: It is used to get the border radius prope

HTML DOM getAttribute() Method

The HTML DOM getAttribute() method is used to retrieve the value of a specified attribute from an HTML element. It returns the attribute's value as a string or null if the attribute doesn't exist.Note: It will return a null or an empty string if the specified attribute doesn't exist.SyntaxObject.get

HTML DOM parentElement Property

The DOM parentElement property is used to return the parent element of a particular child element. It is a read-only property. The parentElement and parentNode properties are similar and the only difference is the parentElement property returns null if the parent node is not an element. Syntax: node