You might have seen my earlier article for Notifications in HTML 5 for Chrome browsers. It was very popular among the developers and designers. Now I am writing an article about attribute which is contenteditable.
In earlier days it was a very time taking task if our client wants to have the lable gets editable when we click on that. But now its just matter of placing one attribute to HTML tag, isn’t it interesting? Yes it is. You just need to place “contenteditable” attribute to element and it will become editable in web page.
Before moving further let’s have a look at official documentation for this attribute.
The contenteditable attribute is an enumerated attribute whose keywords are the empty string, true, and false. The empty string and the true keyword map to the true state. The false keyword maps to the false state. In addition, there is a third state, the inherit state, which is the missing value default (and the invalid value default).
The true state indicates that the element is editable. The inherit state indicates that the element is editable if its parent is. The false state indicates that the element is not editable.
From the official specs we can see that, this attribute can be assigned to any of the elements which the following values:
TRUE value indicates that element is editable. FALSE indicates that element is not editable. INHERIT value means element’s property will be inherited from the immediate parent element.
One thing to keep in mind is that, when we apply contenteditable=true to any element then all child element of that element will become editable unless we have explicitely declared false for any child element.
In above section we have seen how to make an editable element, now we will see that how to apply the style to element which are editable so we can clearly identify those elements.
Make sure you have checked the browser support before applying to your project. But the good thing is that, this attrbute is supported in major browsers. It’s supported on Internet Explore 5.5+. I thing support for IE 5.5 says all. But for detailed support analysis have a look at this link.
Here we are done with the all the attributes explanation and styling, now its time to see some working stuff :). Have a look at this demo page to see how its works.
So from now on when client wants on page editing, just add the attribute and that’s it, you arr done. :)
Share your thought about how you are going to use this attribute or how you have used so far so all other will come to know about it. Also subscribe to our RSS Feed, Follow us on Twitter and Like us on Facebook to get all latest updates.
Avinash Zala currently working at a leading web development company as a Sr. PHP Web Developer. He is the founder of the Xpert Developer. He has completed B.E. in Information Technology. Born and brought up in Ahmedabad. He loves to code and coding is all about passion for him. Follow him on twitter at Avinash Zala & Xpert Developer.
View all posts by: Avinash