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