Learn How to Set Web Page Content As Editable for Site Visitors

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
• Microsoft Edge

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:

Create an Editable To-Do List With Contenteditable

Editable content makes the most sense when you pair it with local storage, so the content persists between sessions and site visits.

1. Open your page in an HTML editor. 
   1. Create a bulleted, unordered list named myTasks:
      • Some task
      • Another task

Add the contenteditable attribute to the 

•  element:

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.

Add a link to jQuery in the

This example uses the Google CDN, but you can host it yourself or use another CDN if you prefer.

At the bottom of your page, just above the  tag, add your script:

});

Inside the document.ready function, add your script to load the tasks into localStorage and get any tasks that were saved there previously:

1. 1. localStorage.setItem('myTasksData', this.innerHTML); // save to localStorage

   2. });

   3. if ( localStorage.getItem('myTasksData')) { // if there is content in the localStorage

   4. $("#myTasks").html(localStorage.getItem('myTasksData')); // put content on page

   5. }

   6.  });

The HTML for the entire page looks like this:








My Tasks


Enter items for your list. The browser will store it for you, so that when you reopen your browser, it will still be here.



• Some task
• Another task