Traditionally there are just two ways to interact with web pages: form elements and links. For many sites, those methods will continue to work fine… but in some cases, you may want to blur or eliminate the line between page content and user input. To achieve that, we can use the simplest - and longest - HTML5 attribute you’ll ever see:
contenteditable is a “boolean” HTML5 attribute: only the attribute needs to be present in order for the feature to work. For the example at the top of this article, the code is:
<h1 contentEditable>Everything changes.</h1>
contenteditable can also be set on container elements, such as
<div>, which allows their content to be edited.
contentEditable can also be set to
true (the same as the attribute being used by itself),
false (turns off inline editing for the element or its content) and
inherit. Images can also be contentEditable, but this only means they can be removed: inserting images onto the page would typically be achieved with the
file input and / or the HTML5 Drag and Drop API.
contentEditable owes its existence to Microsoft: a variation of the attribute has been in Internet Explorer since version 5.5. It’s therefore doubly ironic that it has some serious bug issues in IE 10 and 11.
As with most HTML5 inputs, the
contentEditable attribute is only half the story: any change the user makes to editable content will only be retained so long as the browser tab remains open. Closing the tab, or refreshing the page, will revert the content to its default value.
Context is Everything
contenteditable is cool, so it might be tempting to use it in place of every text form element. Broadly speaking, that would be a mistake: users are accustomed to form elements, which have far greater accessibility affordances than
contenteditable, and they remain appropriate in most circumstances for gathering user input.
So where can you use
contenteditable? Currently the best showcase might be Squarespace, which uses the attribute to allow site owners to edit text on their web pages. This is instinctive and (for Squarespace users) straightforward: most people don’t need a fully fledged text editor for their web pages; they just want to edit content in context. That’s where
contenteditable is likely to be most applicable: allowing the user to edit default content on a page.
SVG & contentEditable
Being an HTML attribute,
contentEditable cannot be used directly on SVG. However, if the SVG is inline in the document, you can add
contentEditable to an HTML element around it:
<div contenteditable="true"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 60"> <text>CONTENT</text> </svg> </div>
For example, the code above will allow the text content
CONTENT to be edited by the user.
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.