Using Content Editable in HTML5
A Brief Introduction
HTML5 comes with a slew of new features that will make the lives of developers around the world just a bit easier. One of these features is the ability to allow users to edit content on the fly.
The “contenteditable” attribute makes whatever element you’ve applied it to instantly editable. Let’s see how it might be used in a practical situation.
Step 1: The HTML
We’ll be using an unordered list to demonstrate the simplicity of contenteditable, and show how on-the-fly editing can be quite handy. Here’s what the HTML5 code looks like:
<h3> Groceries </h3>
<li contenteditable="true"> Milk </li>
<li contenteditable="true"> Butter </li>
<li contenteditable="true"> Eggs </li>
<li contenteditable="true"> Cheese </li>
As you can see, each of the items in our list has the attribute contenteditable set to true. This will allow anyone viewing the page to edit the content directly. Open the HTML file in your browser, and select one of the list items.
Notice that you are given what appears to be a text box to edit the item. Once you’re finished, the “text box” will disappear, allowing you to once again read the list as normal.
Why would I ever need this?
While not illustrated here, HTML5 also features an API that will allow users to save things like lists and documents to their computer. This capability makes the browser tremendously more capable, since in the past, browsers could not communicate directly with a user’s computer.
With this in mind, it’s important to note that quite a few applications make use of lists to present data to their end user. So the implantation of contendeditable has the potential to be rather widespread, as these lists may now be made instantly dynamic.