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.
Note from whatwg.org
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.
contenteditable in Detail
From the official specs we can see that, this attribute can be assigned to any of the elements which the following values:
- true
- false
- inherit
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.
Now let’s see how to apply this attribute on any element. We will apply all possible values on element just to see how it works. You don’t need any kind of JavaScript to make this happen.
Code
[cc lang=”html”]
[/cc]
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.
Stylize the Editable Elements
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.
[cc lang=”css”]
[contenteditable=”true”]
{
/*
Default style for
Editable Element
*/
}
[contenteditable=”true”]:hover
{
/*
Hover style for
Editable Element
*/
}
[/cc]
Browser Support
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.
Demo
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.
Conclusion
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.
