HTML5 Editable Content

HTML5 Editable Content

Many websites have had editable content using AJAX, now it’s a HTML5 built-in feature.

HTML5 aims to make frequent tasks easier, with contentEditable, Form Validation and Regular Expressions some examples of interactions that can now be achieved with far less code.

Setting Locations for Editable Content

Simply add contenteditable to your tags to activate this HTML5 feature. You can also use inherit to match whichever the setting of it’s parent.

								
								
								

Content

Further Content

Saving Edited Content

In most cases, you will then need to save any changes to the content and this can be done in a multitude of ways. With this being a discussion of HTML5, then it makes sense to use Local Storage for this purpose. jQuery is used to amend your localStorage with the new details entered into the editable content areas. Native Javascript can also be used, of course, but jQuery allows a shorter set of code in our example.

								
								

Content

var content = $('#content'); $('#save').on('click', function(){ var editedContent = content.html(); localStorage.newContent = editedContent; });

Read More on HTML5 Editable Content

Leave a Reply

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