Image Image Image Image Image
Scroll to Top

To Top


26

Aug
2011

On 26, Aug 2011 | 6 Comments | In Coding, HTML5/CSS3, Tutorials/Tips

Content editable Feature in HTML5

Content editable Feature in HTML5

by

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

Tags | ,


Find profile of the author on IdentyMe

  • http://equinejointsupplements.blogspot.com mauricio

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

  • http://www.the-triumph.com Web Design Company Mumbai

    Nice Post.

  • Ataul Haque

    thanks

  • James Nock Web Development

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

  • http://www.logodesignstemplate.com/newspress/ Free Magazine Wordpress theme

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

  • http://www.squidoo.com/logo-design-contest-tips Logo Design Contest

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