With HTML5, you can set any of your Web page text elements to be editable by users. Using the “contenteditable” attribute, you can instruct the browser to allow users to insert, delete and alter the text your page contains as they view it. There are many possible uses for this technique, such as allowing users to customize the way your pages appear to them each time they visit. In this tutorial, we will run through the basics of letting users edit your text content, including saving their edits for future reference using the HTML5 storage model.
Create a Page
You can add the techniques in this tutorial to any existing HTML5 pages you have. Otherwise, create your HTML5 Web page using the following structure:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
</script>
</head>
<body>
</body>
</html>You don’t actually need a script section to make elements editable but we are going to demonstrate storing the user edits, for which need some JavaScript.
Add an Editable Element
Add an editable element in the body section of your page using the following markup:
<div id="edit" contenteditable="true">
Here is the element's original content
</div>The “contenteditable” attribute is all the browser needs to know that users should be able to alter the content of the element. The ID attribute is for our JavaScript function. If you save and open your page in a browser now you will see that you can delete and edit the text content. Most browsers display a dotted border around an editable element while it is being edited.
Save User Edits
Let’s assume that we are making the element editable to allow users to dictate what text should appear within it when they next visit the page. Add a button in the body of your page, calling a JavaScript function to save whatever the element contains after user edits:
<input type="button" value="save my edits" onclick="saveEdits()"/>Once the user has edited the element, they can press this button to save their changes. You could alternatively carry out the saving automatically, detecting key presses and saving whenever the user edit occurs. Let’s also include an element to provide confirmation that the changes have been saved. On initially viewing the page, this element will display instructions:
<div id="update"> - Edit the text and click to save for next time</div>When the edits are saved to HTML5 storage, we will update this text to let the user know.
In the script section in your page head, add the following function to process saving the user edits:
function saveEdits() {
//get the editable element
var editElem = document.getElementById("edit");
//get the edited element content
var userVersion = editElem.innerHTML;
//save the content to local storage
localStorage.userEdits = userVersion;
//write a confirmation to the user
document.getElementById("update").innerHTML="Edits saved!";
}This code retrieves the element content before saving it to the Local Storage object. The Local Storage object stores data that remains accessible on subsequent user visits. This will allow us to retrieve the information again if the user re-visits the page in future. If you only want to save the user edits for the current session, use the Session Storage object instead. Finally, the function writes a confirmation message to the page, to let the user know that their edits have been saved.
Now we need to handle the situation in which the user has visited before and has edits saved. Extend your page opening body tag as follows:
<body onload="checkEdits()">Each time a user visits the page, we will check to see if they have stored edits. Add the following function in the script area of your page head:
function checkEdits() {
//find out if the user has previously saved edits
if(localStorage.userEdits!=null)
document.getElementById("edit").innerHTML = localStorage.userEdits;
}When a user visits, they will see the default text if they have no edits saved from past visits. If the user has saved edits in the past, they will see their own saved text in place of the default text. The user can also make future edits and save them at any time.
Save your page and test it in a browser to ensure it works. You can save multiple items of data using HTML5 storage. This means that you can combine “contenteditable” with the storage framework in HTML5 to create highly customizable user interfaces, allowing your users a good level of control over the browsing experience.
Scripting Options
You can use JavaScript functions to alter the editable state of your page elements if necessary. The following syntax stops the element being editable:
var editElem = document.getElementById("edit");
editElem.contentEditable="false";The “contenteditable” attribute can be set to true, false or inherit – in which case the property is determined by whether or not the parent element is editable.
Conclusion
With HTML5 features, you need to consider browser support issues. However, the good news is that the “contenteditable” attribute is supported by all of the main browsers already, including Internet Explorer, Firefox, Opera, Safari and Chrome. You can use the techniques in the above examples pretty freely, as the Local and Session Storage objects are also widely supported.
Try it out here: http://www.developerdrive.com/demo/edit_text/edit_text_demo.html
