The Brave New World of HTML5
[Home of the HTML5 Car]

The following paragraph is special. You may edit it. And with some luck – meaning localStorage working and enabled – you will find your edits again when you return next time. To be true: it has to be using the same browser on the same computer with the same userid.

Change this as you like!

There might be better use of editing content. But this is not our topic here. We want to take a developer’s position who wants to provide editable content.

From a developer’s perspective

Here are some of the basics:

• There is a property designMode of the document object which is used to specify if documents are editable
• There is an element attribute contenteditable which is to specify if elements are editable

Ha! We have two options to do it. Let’s first focus on the second option:

• contenteditable is reflected in the element interface by the contentEditable property
• isContentEditable is a read-only property of type boolean of the element interface that can be used to check if an element can be edited.

The following table shows the relationship between the attribute contentEditable, the element property contentEditable and the element property isContentEditable that holds for every element.

Test your skills

Assume p is an element. So what is the outcome of the following statements:

1. p.contentEditable=false;
2. p.contentEditable=!p.contentEditable;
3. p.contentEditable=!p.isContentEditable;
4. Now that you think you understood here is your bonus question:
   document.designMode = true;

Find the solution here.

An indication of good systems design is that it follows the principle of least surprise. How much surprise did the test hold for you?