Post
Ask Question

HTML5 Contenteditable Attribute

Introduction

 

This article explains the HTML 5 contenteditable attribute and its functionality.
 

Overview

 
One of the new features in HTML 5 is the contenteditable attribute. In HTML 5 any element can be editable. By using some JavaScript event handler you can transform your web page into a fast rich text-box. This feature is mainly applied in Content Management Systems. By using this you can edit content directly from the browser. By using this feature you can create a Fast Rich Text Box and a WYSIWYG(What You See Is What You Get) Editor.
 
According to WHATWG.org: The contenteditable attribute is an enumerated attribute whose keywords are the empty string, true, and false. The empty string and the true keyword map to the true state. The false keyword maps to the false state. In addition, there is a third state, the inherit state, which is the missing value default (and the invalid value default).
 

States of contenteditable attribute

  
According to WHATWG.org, there are the following 3 states of the contenteditable attribute
 
State Description How to write?
true Indicates that element is editable contenteditable=" " / contenteditable="true"
false Indicates that element is not editable contenteditable="false"
inherit Indicates that the element will be editable if and only if, its immediate parent element is editable contenteditable="inherit"
  
Note: Remember that if you make a parent element as editable, then add all the children of that element will become editable because we know that by default the contenteditable attribute's value is inherent (mentioned in the above table). So you need to explicitly make the child element uneditable using contenteditable="false".
 
Syntax
  1. <element contenteditable="true|false"> 
Example
  1. <!DOCTYPE html>    
  2. <html>    
  3.   <body>    
  4.     <h1>HTML 5 contenteditable attribute example</h1>    
  5.     <div contenteditable="true">    
  6.       This text can be edited.    
  7.     </div>    
  8.   </body>    
  9. </html> 
Output 
  1. When the page is loaded:
     
     
  2. After editing:
     
If you check the example above then you will that the changes are not saved so if you want to save the changes then you can.
 

How to save changes?

  
To save the changes, it depends on where we will store our data; commonly we use a database but in this article, I am using localstorage to save the changes.
  1. <!DOCTYPE html>    
  2. <html>    
  3.   <head>    
  4.       <style>    
  5.          [contenteditable="true"] { padding: 10px; outline: 5px dashed #333; }    
  6.          [contenteditable="true"]:hover { outline: 5px dashed #F00; background: }    
  7.       </style>    
  8.   </head>    
  9.   <body>    
  10.      <h1>HTML 5 contenteditable attribute example</h1>    
  11.      <div id="content1" contenteditable="true">    
  12.       This text can be edited.    
  13.      </div><br/>    
  14.      <button onclick="save()">Save Changes</button>      
  15.      <script>    
  16.        if(localStorage.newContent!==null)    
  17.        {    
  18.        document.getElementById("content1").innerHTML=localStorage.newContent;    
  19.        }    
  20.        function save(){     
  21.        var content=document.getElementById("content1").innerHTML;      
  22.        localStorage.newContent = content;      
  23.        alert("Content Has Saved");    
  24.        }    
  25.       </script>    
  26.   </body>    
  27. </html>    
Output
  1. Initially when the page is loaded:
     
     
  2. When editing the text:
     
     
  3. After clicking on the save changes button:
     
     
    Now if you want to see the saved data then open a developer tool then go to the resource and click on local storage as in the following:
Browser Compatibility

Browser Version
Chrome 4.0+
Safari 3.1+
Firefox 3.5+
Opera 9.0+
Internet Explorer 5.5+
Mobile Safari 5.0+
Opera Mini/Mobile N/A
Android 3.0+


Conclusion

 
In this article, we studied the HTML5 Contenteditable Attribute.


Similar Articles