Yan Cui
I help clients go faster for less using serverless technologies.
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:
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.
Whenever you’re ready, here are 3 ways I can help you:
- Production-Ready Serverless: Join 20+ AWS Heroes & Community Builders and 1000+ other students in levelling up your serverless game.
- Consulting: If you want to improve feature velocity, reduce costs, and make your systems more scalable, secure, and resilient, then let’s work together and make it happen.
- Join my FREE Community on Skool, where you can ask for help, share your success stories and hang out with me and other like-minded people without all the negativity from social media.
Nice post-thanks
(Border does not light up when I click in demo-any idea why not?)