Allowing Users to Edit Text Content with HTML5

Jun 6, 2012
HTML5
181 Shares
By

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

Author: Sue Smith
Sue Smith works as a Web/ software developer and technical writer based in the UK: see benormal.info for details. Sue has written for various clients including Smashing Magazine and Mobiletuts+. She also does a little Android development and some comedy writing.
  • http://twitter.com/banago Baki Goxhaj

    Great article. I’ve been thinking to check contenteditable for a long time now. Thanks for that. My question would be, how much work would that need to save the content server-side, on a database, rather then locally.

  • http://twitter.com/CarlosKhali Carl-Michael Hughes

    so cool. I can see so many possibilities that I’m not sure what to use this for yet!

  • http://twitter.com/jkohlin Johan Kohlin

    I remember using this attribute back in the old days of Internet Explorer 5.5. It was a breakthrough back then and perfect for CMS’s. It sure took its time to be part of the standard of HTML.

  • Edit

    Ive been trying to have multiple edit in place text on different pages, but it will only edit 1. How do you make it so that for examlple in two pages, I have 5 independent edit in place text with its own save and cancel button?

    Thanks

  • Tralif07

    how can i put an option so that it can show all the previous edited text? like if i click first.. it would show the original text. and if i click the second it would show the following edited text.

  • http://www.facebook.com/people/Travis-Michael-Heller/677050608 Travis Michael Heller

    I am trying to get store multiple values from different inputs with no successs.I have tried this many times and i just get more frustrated.
    I was hoping someone could show me an example of how to do this.

    Here is what i have as an attempt:

    This is a demo to accompany the following tutorial: Allowing Users to Edit Text Content with HTML5

    function saveEdits() {
    //get the editable elementvar editElem = document.getElementById("edit");
    //get the edited element contentvar userVersion = editElem.innerHTML;
    //save the content to local storagelocalStorage.userEdits = userVersion;
    //write a confirmation to the userdocument.getElementById("update").innerHTML="Edits saved!";
    }function checkEdits() {
    //find out if the user has previously saved editsif(localStorage.userEdits!=null) document.getElementById("edit").innerHTML=localStorage.userEdits;}
    Here is the element's original content

    Edit the text and click to save for next time

    function saveEditsPlus() {
    //get the editable elementvar editElem = document.getElementById("editme");
    //get the edited element contentvar userDisplay = editElem.innerHTML;
    //save the content to local storagelocalStorage.userNow = userDisplay;
    //write a confirmation to the userdocument.getElementById("updateme").innerHTML="Edits saved!";
    }function checkEdits() {
    //find out if the user has previously saved editsif(localStorage.userNow!=null) document.getElementById("editme").innerHTML=localStorage.userNow;}
    Here is the element's original content

    Edit the text and click to save for next time

  • lisa

    what is the code for saving automatically, detecting key presses and saving whenever the user edit occurs?

  • Ben Hirst

    Take a look at my code —

    function saveEdits() {

    //get the editable element

    var editElem = document.getElementById(“edit, text”);

    //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!”;

    }

    function checkEdits() {

    //find out if the user has previously saved edits

    if(localStorage.userEdits!=null)

    document.getElementById(“edit, text”).innerHTML = localStorage.userEdits;

    }

    var editElem = document.getElementById(“edit, text”);

    editElem.contentEditable=”false”;

    #edit {

    border-style:inset;

    border-color:lime;

    border-width:5px;

    border-radius:20px;

    text-align:center;

    font-family:cyberspace;

    }

    #text {

    border-style:inset;

    border-color:lime;

    border-width:5px;

    border-radius:20px;

    text-align:center;

    font-family:cyberspace;

    }

    #button {

    color:lime;

    font-family:arial black;

    }

    Save your Home Page.

    What is wrong with this?

  • Ben Hirst

    Whats wrong with this?

    function saveEdits() {

    //get the editable element

    var editElem = document.getElementById(“edit, text”);

    //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!”;

    }

    function checkEdits() {

    //find out if the user has previously saved edits

    if(localStorage.userEdits!=null)

    document.getElementById(“edit, text”).innerHTML = localStorage.userEdits;

    }

    var editElem = document.getElementById(“edit, text”);

    editElem.contentEditable=”false”;

    #edit {

    border-style:inset;

    border-color:lime;

    border-width:5px;

    border-radius:20px;

    text-align:center;

    font-family:cyberspace;

    }

    #text {

    border-style:inset;

    border-color:lime;

    border-width:5px;

    border-radius:20px;

    text-align:center;

    font-family:cyberspace;

    }

    #button {

    color:lime;

    font-family:arial black;

    }

    Save your Home Page.

  • Ben Hirst

    I do have the bits at the top but there is to much here to include that, It just removes it

  • http://www.facebook.com/kbemus Karen Bemus Osh

    awesome tutorial. thanks so much! this solves my problem of saving edits server side in php which is a total pain in the rear. xxoo

  • http://www.facebook.com/kbemus Karen Bemus Osh

    it works great in all new browsers except of course IE, it’s not even working in IE9 you can edit it but it won’t save the edit, comes up with an error unable to access innerHTML is there a workaround hack to make it work in IE 9?

  • Santosh

    Thanks so much! its really saved my time…

  • http://www.facebook.com/emmanuelpn Emmanuel Parlour

    is there a way to do this simply permanently? I would like for users to be able to edit websites

    • cybergrace

      Most web browsers have add-ons you can get for free that allow someone to edit a webpage with their browser. This is a person you’ve already give the username & password to.

  • André Piropo

    i know that this topic is too old, but i like it so much and i have a doubt, i wanna know if is possible to save the content of the div into a file instead of save in a localStorage. I´m asking because i´m developing an iphone app and i need to save and after read the content even if i close the app, in this case he works like a web browser, because everytime i close the browser the content backs to begin “Here is the element’s original content”.

    Pls help me and tks for your attention

  • Roosafeed Koya Kp

    How to save the edits so that every users can see the edits??