1. Computing

Discuss in my forum

Making Web Page Content Editable by Users

Use the Contenteditable Attribute

By

Web applications let you do a lot of things on the web that you used to need a separate program on your computer to do. And one thing that you can do on web pages is edit content. It’s as easy as adding an attribute to your HTML tags—the contenteditable attribute, in fact.

The Contenteditable Attribute Isn’t Really New

The contenteditable attribute was first introduced in Internet Explorer 5.5, and is supported by Chrome, Firefox (3), Opera (9), and Safari (3). In fact the only place this attribute doesn’t really work is in older mobile browsers like iOS 4, but most people have got the more recent iOS 5 or iOS 6 versions, where the attribute is supported.

It is considered a new attribute because it wasn’t added to the HTML specification until HTML5. But if you put it in an HTML 4 document it will work.

How to Use Contenteditable

This attribute is very easy to use. You simply add it to the HTML element you want to be editable in the browser window. For example, to make a DIV element editable you would write:

<div contenteditable="true">

While you can leave off the ="true" bit, I don’t recommend it, as it’s not as clear what you mean. On the other hand, some older browsers interpret any instance of the attribute as meaning “true” even if you have explicitly said contenteditable="false" so if you plan on turning this attibute on and off without removing it from the element, be sure to test extensively.

Create a Simple To-Do List in Your Browser with Contenteditable

The contenteditable attribute makes it easy to create a simple to-do list in your web browser. In this example, I will also show you how to use localStorage to save the to-do list for later, so you can close the browser and re-open it and have your list to look at later.

  1. Open your web page in an HTML editor. You should be able to add attributes to HTML tags and some simple scripts to the page with your editor, but it can be WYSIWYG or a text editor, whichever you’re more comfortable with.
  2. Create a single bullet unordered list can call it “myTasks”:
    <ul id="myTasks">
      <li></li>
    </ul>
  3. Add the contenteditable attribute to the UL element:
    <ul id="myTasks" contenteditable="true">
    Once you’ve done this, you have a to-do list that is editable. But you can’t turn off the browser or leave the page, or all your tasks will disappear. So you need to add a simple script to save the tasks to localStorage.
  4. Add a link to jQuery in the HEAD of your document.
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    I like using the Google CDN but you can host it yourself or use another CDN if you prefer.
  5. At the bottom of your page, just above the </body> tag, add your script:
    <script>
      $(document.ready(function() {

      });
    </script>
    This is the start of the jQuery document ready function, and tells the browser to load this script after the document has fully loaded.
  6. Inside the document ready function add your script to load the tasks into localStorage and get any tasks that were saved there previously:
    $(document.ready(function() {
      $("#myTasks").blur(function() { // when the cursor leaves the #myTasks element
          localStorage.setItem('myTasksData', this.innerHTML); // save to localStorage
        });
        if ( localStorage.getItem('myTasksData')) { // if there is content in the localStorage
          $("#myTasks").html(localStorage.getItem('myTasksData')); // put content on page
        }
    });

The HTML for the entire page looks like this:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Tasks</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>

<body>
<h1>My Tasks</h1>
<p>Start typing in your list, and the browser will store it for you. When you reload it will still be here.</p>
<ul id=myTasks contenteditable=true>
  <li></li>
</ul>

<script>
$(document).ready(function(){
  $("#myTasks").blur(function() {
    localStorage.setItem('myTasksData', this.innerHTML);
  });

  if ( localStorage.getItem('myTasksData') ) {
    $("#myTasks").html(localStorage.getItem('myTasksData'));
  }
});
</script>
</body>
</html>
  1. About.com
  2. Computing
  3. Web Design / HTML
  4. HTML and XHTML
  5. HTML 5
  6. HTML 5 Tags
  7. Making Web Page Content Editable by Users

©2014 About.com. All rights reserved.