HTML - DOM Element isContentEditable Property

Quiz

The HTML DOM Element isContentEditable property is used to check if a webpage element can be edited by users directly or not.

This property returns a boolean value true, only if the users can edit the content of a specific element on the webpage, and false if the content is not editable by users.

Syntax

Following is the syntax of the HTML DOM Element isContentEditable property −

element.isContentEditable

Parameters

Since this is a property, it will not accept any parameter.

Return Value

This property returns true if the element content can be edited by the user and false otherwise.

Example 1: Checking Content Editable

If the content is editable, the HTML DOM Element isContentEditable property will return true −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM Element isContentEditable</title>
</head>
<body>
<h3>HTML DOM Element isContentEditable property</h3>
<p>Element's content can be edited...</p> 
<div id="editableDiv" class="editable" contenteditable="true">
<strong>This div is editable. Edit Me!</strong>
</div>
<p id="res"></p>
<script>
   const editableDiv = document.getElementById('editableDiv'); 
   document.getElementById('res').innerHTML = 
   "Is content editable? " + editableDiv.isContentEditable;
</script> 
</body>
</html>

The above program returns "true", because the div element content can be edited by users.

Example 2: Content Non-Editable

Following is another example of the HTML DOM Element isContentEditable property. Since the content can't be edited by users, it will return false −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM Element isContentEditable</title>
</head>
<body>
<h3>HTML DOM Element isContentEditable property</h3>
<p>Element's content cannot be edited</p> 
<div id="nonEditableDiv"  contenteditable="false" onclick="edit()">
Try to edit this content.</div>
<p id="res"></p>
<script>
   function edit(){
   const nonEditableDiv = document.getElementById('nonEditableDiv');
   alert("Content is not editable");
   document.getElementById('res').innerHTML = 
   "Is content is editable? " + nonEditableDiv.isContentEditable;
   }
</script>
</body>
</html>

The above program returns "false", because the div element content can't be edited by users.

Supported Browsers

Property
isContentEditable	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Print Page