HTML - DOM Element contentEditable Property

Quiz

The HTML DOM element contentEditable property is used to get (retrieve) and set (update) the editability state of an element's content.

This property allows you to make the text content inside a particular element editable for users. It is similar to boolean types: true indicates that it is editable, and false indicates that it is not editable.

Note: If the value is set to inherit, it means that the element can inherit editability from its parent element.

Syntax

Following is the syntax of the HTML DOM Element contentEditable (to set the property) −

element.contentEditable = value

Here, the value is the new value that you want to assign to this property, it can be either 'true' or 'false'.

Use the following syntax to get the contentEditable property −

element.contentEditable

Parameters

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

Return Value

his property returns a string 'true' for editable content and 'false' for non-editable content.

Example 1: Setting Content Editable Paragraph

The following program demonstrates how to use the HTML DOM Element contentEditable property to make the content of a paragraph (<p>) element editable −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element contentEditable</title>
<style>
   #editable {
       border: 1px solid #ccc;
       padding: 10px;
       width: 300px;
   }
</style>
</head>
<body>
<h3>HTML DOM Element contentEditable Property</h3>
<p>Content Editable Paragraph</p>
<p id="editable">
Click here to edit this paragraph. You can modify the text directly.</p>
<p><strong>Note:</strong>Click inside the paragraph above to start 
editing.</p>
<script>
   let content = document.getElementById('editable');
   content.contentEditable = true;
</script>
</body>
</html>

The program sets the contentEditable property for a paragraph element, making it editable.

Example 2: Retrieving the ContentEditable Property Value

Here is another example of the HTML DOM Element contentEditable property. This property is used to retrieve the value of the contentEditable attribute −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element contentEditable</title>
<style>
   #editable {
       border: 1px solid #ccc;
       padding: 10px;
       width: 300px;
   }
</style>
</head>
<body>
<h3>HTML DOM Element contentEditable Property</h3>
<p>Click the below button to retrieve contentEditable property value</p>
<p id="editable" contenteditable="false">This is a not editable content</p>
<button onclick="display()">Display contentEditable Property</button>
<p id="res"></p>
<script>
   function display(){
      let content = document.getElementById('editable');
      document.getElementById('res').innerHTML = 
      "The contentEditable property value: " + content.contentEditable;
   }
</script>
</body>
</html>

When the button is clicked, it displays the contentEditable property value as "false".

Example 3: Checks the editability of a Div Content

In the example below, we use the contentEditable property to check whether the content of the <div> element is editable or not −

<!DOCTYPE html>
<html lang="en">
<head> 
<style>
   .editable {
       border: 1px solid black;
       padding: 10px; 
   }
</style>
</head>
<body>
<h3>HTML DOM Element ContentEditable Property</h3>
<p>Check editability with a click!</p>
<div class="editable" contenteditable="true" id="editablePara">
Edit me! Am I editable? Can you modify me?
</div> 
<br>
<button onclick="checkEditable()">Check Editable</button>
<script>
   function checkEditable() {
      const editablePara = document.getElementById('editablePara');
      const isEditable =editablePara.isContentEditable;
      alert(`Is Editable: ${isEditable ? 'Yes' : 'No'}`);
   }
</script>
</body>
</html>

When the button is clicked, an alert message is displayed indicating whether the content of the div is editable ("Yes") or not ("No").

Example 4: Switch between Editable and Non-editable Content

This example allows us to control the editability of the content by using a toggle button, which enables and disables the editability of the content on the web page −

<!DOCTYPE html>
<html lang="en">
<head> 
<style>
   .editable {
       border: 1px solid black;
       padding: 10px;
       margin-bottom: 20px;
   }
   .edit-mode {
       background-color: #94b0ff;
   }
   .btn {
       cursor: pointer;
   }
   .btn:hover {
       background-color: #45a049;
   }
</style>
</head>
<body>
<h3>HTML DOM Element ContentEditable Property</h3>
<p>Control the editability of the below content!!</p>    
<div class="editable" id="editablePara" contenteditable="true">
<p>This paragraph is editable.Click the button below to toggle edit mode.</p>
</div> 
<button class="btn" onclick="toggleEditable()">Toggle Edit Mode</button>
<script>
   function toggleEditable() {
      const editablePara = document.getElementById('editablePara');
      editablePara.contentEditable 
	  = editablePara.contentEditable === 'true' ? 'false' : 'true';
      const btnText = editablePara.contentEditable 
	  === 'true' ? 'Disable Edit Mode' :'Enable Edit Mode';
      document.querySelector('.btn').textContent = btnText;
      editablePara.classList.toggle('edit-mode');
   }
</script>
</body>
</html>

When the button is clicked, it toggles the content between editable and non-editable states.

Supported Browsers

Property
contentEditable	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Print Page