Design, CG Graphics & Inspiration
Content editable Feature in HTML5

Content editable Feature in HTML5

One of the HTML5 innovations has become the ability to edit the page in the browser. This feature is called content editable. It works in all modern browsers. To make the page editable, you need to put the tag attribute contenteditable = “true”. Under the tag can be almost everything: formatted text, images, lists, and even flash-movies. But you can add only text, the rest can only be removed. In this post I’ll show an example of using content editable on the website.

HTML-code

<!DOCTYPE HTML>
<html>
  <head>
    <title>Editable list in HTML5</title>

    <script type="text/javascript">

Pressing on the “Save” (“Edit”) button is handled in the buttonClick () function: attribute of contentEditable changes and the button inscription and list’s contents are copied into the text field.

 function buttonClick ()
      {
        var div = document.getElementById ("myDiv");
        var button = document.getElementById ("myButton");
        var content_div = document.getElementById ("ListContent");
        var textarea = document.getElementById ("myTextarea");

        if (div.contentEditable == "true")
        {
          div.contentEditable = "false";
          content_div.style.display = "inline";
          textarea.innerHTML = div.innerHTML;
          button.value = "Edit";
        }

        else
        {
          div.contentEditable = "true";
          content_div.style.display = "none";
          button.value = "Save";
        }

      }
    </script>
  </head>

  <body>
    <b>What is necessary to do?</b> (editable list)

Editable div. Pay attention to contenteditable = “true”.

 <div id="myDiv" contenteditable="true">
      <ul id="todolist">  
        <li>Buy milk</li>  
        <li>Buy eggs</li>
        <li>Repair the door</li>
        <li>Edit the list!</li>
      </ul>
    </div>

“Save” button (“Edit”). By pressing the buttonClick () function is called.

<input type="button" id="myButton" onclick="buttonClick();" value="Сохранить">

    <br><br>

Text field in which by pressing the “Save” button the list content is displayed.

 <div id="ListContent" style="display: none;">
      What’s in the list:<br>
      <textarea rows="10" cols="70" id="myTextarea">
      </textarea>
    </div>

  </body>
</html>

Here you can see the example.

Aloha Editor — HTML WYSIWYG editor with content editable feature. Demo

You might also be interested in..

HTML5 Essentials Resources
Timesaving Tools and Services for Web Developers
HTML5 Placeholder stylization with the help of CSS
15 Handy HTML5/CSS3 Frameworks For Web Developers
20 Free HTML5 Games
Meet The Future – HTML5 Demos

  • Boris,
  • August 26, 2011

SHARE THIS POST

Subscribe for the hottest posts

Subscribe to our email newsletter for useful tips and freebies.

  • WOW! You make me understand. You helped me so much.  I’m confused about it for a long time. Thanks for sharing tips.

  • Nice Post.

  • Ataul Haque

    thanks

  • James Nock Web Development

    The example doesn’t work in Firefox or Chrome??? :/

  • Nice tips, being a Graphic designer, it would very useful for me while designing a website, thanks

  • Very useful tips, i will try to do that, thank for this knowledge:)

  • andrewliu

    群号:251017265 html5+css3+jquery交流群 欢迎大家

  • andrewliu

    群号:251017265 html5+css3+jquery交流群 欢迎大家

  • WOW! You make me understand. You helped me so much.  I’m confused about it for a long time. Thanks for sharing tips.

  • Nice Post.

  • Ataul Haque

    thanks

  • James Nock Web Development

    The example doesn’t work in Firefox or Chrome??? :/

  • Nice tips, being a Graphic designer, it would very useful for me while designing a website, thanks

  • Very useful tips, i will try to do that, thank for this knowledge:)

  • andrewliu

    群号:251017265 html5+css3+jquery交流群 欢迎大家

  • andrewliu

    群号:251017265 html5+css3+jquery交流群 欢迎大家