HTML | DOM contentEditable Property
Last Updated :
30 Nov, 2019
The DOM contentEditable property is used to return a Boolean value where true means the content of an element is editable and false represents the content is not editable. This property is read-only.
Syntax:
Return Value: This property returns a Boolean value:
- True – It means the content of an element is editable.
- False – It means that the content of an element is not editable.
Example:
<!DOCTYPE html>
< html >
< head >
< title >
DOM iscontentEditable Property
</ title >
</ head >
< body style = "text-align: center" >
< h1 style = "color:green" >
GeeksforGeeks
</ h1 >
< h2 >
DOM contentEditable Property
</ h2 >
< span id = "P" contenteditable = "true" >
Span 1 is editable.
</ span >
< br >
< button onclick = "GFGFun()" >
Click
</ button >
< p id = "pid" ></ p >
< p id = "pid1" ></ p >
< script >
function GFGFun() {
var gfgvar =
document.getElementById("P").isContentEditable;
document.getElementById("pid").innerHTML =
"Span 1 is editable: " + gfgvar;
}
</ script >
</ body >
</ html >
|
Output:
- Before Click on Button:
- After Click on Button:
Supported Browsers: The browser supported by contentEditable attribute are listed below:
- Chrome
- Firefox
- Internet Explorer
- Opera
- Safari
Share your thoughts in the comments
Please Login to comment...