Making Web Page Content Editable by Site Visitors

Using the Contenteditable Attribute

Making the text on a website editable by users is easier than you might expect. HTML provides an attribute for this purpose: contenteditable.

The contenteditable attribute was first introduced in 2014 with the release of HTML5. It specifies whether the content it governs can be changed by a site visitor from within the browser. 

Support for the Contenteditable Attribute

Most modern desktop browsers support the attribute.

These include:

  • Chrome 4.0 and up
  • Internet Explorer 6 and up
  • Firefox 3.5 and up
  • Safari 3.1 and up
  • Opera 10.1 and up

The same goes for most mobile browsers, too.

How to Use Contenteditable

Simply add the attribute to the HTML element you want to make editable. It has three possible values: true, false and inherit. Inherit is the default value, meaning that the element takes on the value of its parent. Likewise, any child elements of your newly editable content also will be editable unless you change their values to false. For example, to make a DIV element editable, use:

<div id="example" contenteditable="true|false|inherit">

Create an Editable To-Do List With Contenteditable

In this example, you'll also learn how to use localStorage to save the to-do list for later.

  1. Open your web page in an HTML editor. 
  2. Create a bulleted, unordered list named “myTasks”:
    <ul id="myTasks">
    <li>Some task</li>
    <li>Another task
    </li>
    </ul>
  1. Add the contenteditable attribute to the <ul> element:
    <ul id="myTasks" contenteditable="true">
    You now have a to-do list that is editable — but if you close your browser or leave the page, your list will disappear. The solution: Add a simple script to save the tasks to localStorage.
  2. 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>
    This tutorial uses the Google CDN, but you can host it yourself or use another CDN if you prefer.
  1. 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 loaded fully.
  2. 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>Enter items for your list. The browser will store it for you, so that when you reopen your browser, it will still be here.</p>
    <ul id="myTasks" contenteditable="true">
    <li>Some task</li>
    <li>Another task
    </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>
    Format
    mla apa chicago
    Your Citation
    Kyrnin, Jennifer. "Making Web Page Content Editable by Site Visitors." ThoughtCo, Aug. 24, 2017, thoughtco.com/making-content-editable-by-users-3467988. Kyrnin, Jennifer. (2017, August 24). Making Web Page Content Editable by Site Visitors. Retrieved from https://www.thoughtco.com/making-content-editable-by-users-3467988 Kyrnin, Jennifer. "Making Web Page Content Editable by Site Visitors." ThoughtCo. https://www.thoughtco.com/making-content-editable-by-users-3467988 (accessed November 20, 2017).