HTML | DOM contentEditable Property
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:
- Returns the contentEditable property:
HTMLElementObject.contentEditable
- Set the contentEditable property:
HTMLElementObject.contentEditable = true | false
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" > w3wiki </ 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