Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Check whether the content of an element is editable or not in HTML
The contenteditable attribute indicates whether or not an element's content is editable. If the content is found to be editable, the browser will allow editing by modifying its widgets.
This attribute must always take one of these two values below −
true, or an empty string − indicating that the content is editable
false − indicating that the content is not editable
If the attribute does not take any of the values mentioned above, it is declared an empty string and will, by default, become an editable content.
Note − If an element's contenteditable attribute is not set or not valid, its value will be inherited by the element from its parent; that means if the parent is editable, so is the element.
Syntax
HTMLElementObject.contentEditable=true|false
Following are the examples…
Example: with “true” attribute value
In the following example we are using contenteditable attribute and the value is set to “true” to make our text editable.
<!DOCTYPE html> <html> <body> <h1>It Is Editable,Try To Change This Text.</h1> <p contenteditable="true">Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p> </body> </html>
Output
On executing the above script, it enables the text to make changes through or make text editable as we mentioned the contenteditable to true.
Example: with “false” attribute value
In the following example we are using contenteditable attribute and the value is set to “true” to make our text editable.
<!DOCTYPE html> <html> <body> <h1>It Is Not Editable; Try To Change This Text.</h1> <p contenteditable="false">Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p> </body> </html>
Output
On executing the above script, it does not enable the text to make changes through or make text editable as we mentioned the contenteditable to false.
Example: Using Javascript
In the following example we are using contenteditable attribute value set to “true” to make our text editable.
<!DOCTYPE html> <html> <body> <h1>find out if text editable</h1> <p id="varma" contenteditable="true">We have established a Digital Content Marketplace to sell Video Courses and eBooks at a very nominal cost. You will have to register to avail these premium services.</p> <button onclick="myFunction()">Try it</button> <script> function myFunction() { var x = document.getElementById("varma").contentEditable; } </script> </body> </html>
Output
When the script is executed, it triggers the contenteditable and makes the text available to edit or make changes as we have set the contenteditable value to true.
Similar code in JavaScript is used to make the text not editable by using the “false” parameter to the contenteditable attribute.
632 Views
