Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
  • contenteditable attribute in html5

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 411
    Comment on it

    contenteditable attribute is a new feature added to HTML5. By the terminology, we understand that this attribute is used to specify that whether the contents of an element are editable or not. This attribute was designed and implemented by Microsoft in Windows Internet Explorer 5.5


    CSS Syntax:

             < element contenteditable = “true|false” >


    This attribute has three possible values:


    1. contenteditable = “” or contenteditable = “true” - this implies that the content of an element is editable.


    2. contenteditable = “false” - implies that the content of an element is not editable.


    3. contenteditable = “inherit” - this is the default value in case if any value is not set. This implies that the content of an element are editable only if its immediate parent element is editable.


    Example 1: When an element's content is set to editable, then its child elements are also set to editable by default.


    <div class = “div-one” contenteditable = “true”>

              <p>By setting the contenteditable attibute to true, the content of this div are editable.</p>

               <div class = “div-two”'>

                        <p>By default the content of this div are also editable as this div is a child element to the above div </p>




    Example 2 : When only child element's contents are set to editable.


    <div class = “div-one”>

                  <p>Contents of this are non-editable.</p>

                  <div class = “div-two” contenteditable = “true”>

                           <p>Content of this div are editable.</p>




    Example 3: In case when you want only parent element's content editable.


    <div class = “div-one” contenteditable = “true”>

                 <p> Content editable </p>

                 <div class = “div-two” contenteditable = "false">

                      <p> Content non-editable </p>




    This attribute is supported in almost all browsers like Chrome 4.0+, Safari 3.1+, Mobile Safari 5.0+, Firefox 3.5+, Opera 9.0+, Opera Mini/Mobile, Internet Explorer 5.5+, Android 3.0+.


    Next thing we need to know is that how to save the changes?


    Basically, any change in the document will be stored to the database but in this blog we don't have database access, so we will store the changes in localStorage with the help of jQuery.


    Firstly add a button next to the content.

    <div class = div-one contenteditable = true>
             <p>Contents of this div are editable. Now you can make the changes in the contents of this div.</p>
    <button id = save> Save changes </button>


    let's create an event through the script:


    var oldContent = $( '.div-one' ); // set the content
    $( '#save' ).on( 'click', function(){ // store the new content in localStorage when the button is clicked
    	var editedContent = oldContent.html();
    	localStorage.newContent = editedContent;
    } );
    if(localStorage.getItem('newContent')) { // apply the newContent when it is exist in localStorage 


    Here in this code we are creating new key in localStorage which contains the last change made in the content. On refreshing the page we will still see the changes we made.


    Happy Coding :)

 0 Comment(s)

Sign In

Sign up using

Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: