This article will tell you how to use the Html5 global attribute contentEditable to make the Html element editable or uneditable. It will also tell you how to use the Html element’s attribute isContentEditable to check whether the Html element is editable with examples.
1. How To Make Html Element Editable Or Uneditable.
- If you want to make an Html web element editable, you can set the Html element’s attribute contentEditable=”true”, if not just set the attribute contentEditable=”false”.
- Below is the example.
<!-- the ul element is editable. --> <ul id="id-2" contentEditable="true" onclick="javascript:on_click(this)"> <!-- the p element is not editable. --> <p id="id-1" contentEditable="false" onclick="javascript:on_click(this)">
2. How To Check Whether The Html Element Is Editable Or Not.
- The Html element’s attribute isContentEditable can be used to check whether the Html element’s content is editable or not.
- If this attribute’s value is true then the element is editable, if the attribute’s value is false then the element is not editable.
- Below is the example.
isContentEditable = document.getElementById('id-1').isContentEditable
3. How To Use The Html5 Global Attribute contentEditable and isContentEditable Examples.
- The example demo video URL is https://youtu.be/D1ieo9UWU58.
- Create an Html file html5-global-attribute-contenteditable-example.html.
- Copy the below source code into the above Html file.
<!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>Html5 Global Attribute ContentEditable & isContentEditable Example</title> </head> <script language='javascript'> /* * This function will be invoked when user click the Html element. */ function on_click(src){ // Get the clicked Html element's isContentEditable attribute value. isContentEditable = src.isContentEditable; message = "The element content with id " + src.id if(isContentEditable){ message += " is editable" }else{ message += " is not editable" } alert(message); } </script> <body> <p id="id-1" contentEditable="false" onclick="javascript:on_click(this)"> This content is not editable. <ul id="id-2" contentEditable="true" onclick="javascript:on_click(this)"> <li id="id-3" onclick="javascript:on_click(this)">Html5</li> <li id="id-4" onclick="javascript:on_click(this)">Python</li> <li id="id-5" onclick="javascript:on_click(this)">Java</li> </ul> <div id="id-6" contentEditable="false" onclick="javascript:on_click(this)"> This child div element is not editable.</div> </p> <p id="id-7" contentEditable="false" onclick="javascript:on_click(this)"> This content is not editable.<br/> <span id="id-8" contentEditable="true" onclick="javascript:on_click(this)"> This child span element is editable.</span> <div id="id-9" onclick="javascript:on_click(this)"> This child div element is not editable.</div> </p> </body> </html>