Having fun with HTML5 – contenteditable attribute

As I go through the HTML5 spec, I find some useful new feature just about everywhere, and the new contenteditable attribute is certainly one of those. It’s supported by most elements and provides a simple and yet effective way for you to allow the users to edit user contents (blog posts for instance) inline as opposed to having to open up a separate form.

It couldn’t be simpler to use it, just set the contenteditable attribute of your element to true:

<article id="editable" contenteditable="true">
    <p>This area is an article, its border will light up when you click anywhere inside.</p>
    …
</article>

And now when the user can edit the content of the element themselves:

image image

Here is a quick demo I’ve put together which uses two buttons to save and clear changes to/from the local storage, though you can just easily save the changes automatically when the element loses the focus.

 

Learn to build Production-Ready Serverless applications

Want to learn how to build Serverless applications and follow best practices? Subscribe to my newsletter and join over 5,000 AWS & Serverless enthusiasts who have signed up already.

1 thought on “Having fun with HTML5 – contenteditable attribute”

Leave a Comment

Your email address will not be published. Required fields are marked *