HTML DOM isContentEditable Property

The HTML DOM isContentEditable property returns whether the content of an element can be modified or not.

Syntax

Following is the syntax −

Returning boolean value - true/false

HTMLElementObject.isContentEditable

Boolean Values

Here, “booleanValue” is returned −

booleanValue	Details
true	It defines that the content of HTMLElementObject is editable.
false	It defines that the content of HTMLElementObject is not editable.

Example

Let us see an example for isContentEditableproperty −

<!DOCTYPE html>
<html>
<head>
<title>isContentEditable</title>
<style>
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   * {
      padding: 2px;
      margin:5px;
   }
   input[type="button"] {
      border-radius: 10px;
   }
</style>
</head>
<body>
<form>
<fieldset>
<legend>isContentEditable</legend>
<label for="textSelect">Full Name:
<input type="text" id="textSelect" contentEditable="true" placeholder="John Doe">
</label><br>
<label for="emailSelect">Email:
<input type="email" id="emailSelect" placeholder="[email protected]">
</label>
<input type="button" onclick="confirmtext()" value="Submit">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var inputText = document.getElementById("textSelect");
   var inputEmail = document.getElementById("emailSelect");
   divDisplay.textContent = 'NOTE: Email will be not editable once submitted';
   function confirmtext() {
      inputEmail.disabled = !inputEmail.isContentEditable;
      inputText.disabled = !inputText.isContentEditable;
      divDisplay.textContent = 'Details Submitted';
   }
</script>
</body>
</html>

Output

This will produce the following output −

Before clicking ‘Submit’ button −

HTML DOM isContentEditable Property

After clicking ‘Submit’ button −

HTML DOM isContentEditable Property