Categories
CSS & HTML Tips

HTML: Make Content Editable in Element / Tags without JavaScript

It’s not well known but this feature was invented by Microsoft and has been implemented across all major modern browsers ever since IE 5.5. Adding an attribute of contenteditable and assign a value of “true” to it makes the content value / inner text of that element editable by a single click:

<blockquote contenteditable="true">Click to edit me!</blockquote>

Try it live:

Click to edit me!

When you are done editing, just hit Enter (if it’s an inline element) or blur the cursor focus from the editing region (if it’s a block element). Theoretically, this attribute can be added to any HTML tags to make them immediately editable without the help of any JavaScript at all. You can add it to a div, a span or a td.

Now what can we do with this new trick?

By Yang Yang

Hello, I'm Yang. I build online businesses that please people. Want to join in and post some useful articles on Kavoir.com? Shoot me a message.

3 replies on “HTML: Make Content Editable in Element / Tags without JavaScript”

Hmmm, then I guess I’ll have to resist the idea to use it on any mission critical websites, but maybe hobby or experimental ones.

I’m trying to find a way to submit the edited content to the server, but thus far haven’t been lucky without JavaScript to help pass the value.

Comments are closed.