Earlier I have explained few attributes of HTML5 are HTML5 download and HTML5 AutoFocus attributes. Sometimes I think HTML5 makes our coding very easy and we are using its feature in much more application.There are different ways to inline edit content on a browser and mostly we use JavaScript. Instead of using Javascript to inline edit content, go with the HTML5 attribute.
Finally, Today we will discuss the one another attribute of HTML5 which is contenteditable. You might be heard about it or may used it. contenteditable attribute is the quite amazing feature of HTML5 and It is perfect for inline editing.Generally inline editing is very complicated and to deal with it very easily, a contenteditable attribute in useful.
The contenteditable attribute of HTML5 makes the rich text editing in the web browser with very easy manner. After setting the contentEditable = ‘true’ in HTML element, you can open the element in edit mode.HTML5 contentEditable attribute can be used to open certain elements in an editable mode.
The most commonly contentEditable attribute is used for editing input text and text area content.With contentEditable attribute, you can type in the div, table, p, span, body, and so many HTML elements.
ContentEditable attribute Syntax:
1 2 3 | <element contenteditable = "value"> |
The supported values of the contenteditable are:
1 2 3 | contenteditable: true | false | inherit |
Basically contenteditable have only two types of parameters: TRUE (editable content) or FALSE (content is not editable).The third parameter (which is the default) is inherited to indicate parent element value is set as editable unless it is not explicitly introduced a contenteditable = “false” to prevent editing..If a contenteditable element is true or to inherit and its parent has true means that the element is editable Otherwise, the element can not be editable.
Example:
1 2 3 4 5 6 7 | <!-- if true set,element is editable --> <p contenteditable= "true"> Edit this paragraph</p> <!-- if false set,element is not editable --> <p contenteditable="false">Can not edit this paragraph</p> |
You can directly use the contenteditable attribute in the newer browser without assignment.
1 2 3 | <p contenteditable> |
This represents that the contenteditable attribute is true.
One of the major benefits of contenteditable is that you also use the keyboard shortcuts.for example, it will mark text as bold by simply using ctrl + b.
Demo:
Here is a demonstration, click on the following text to make it editable:
NOTE: HTML5 attributes are case insensitive and written in all uppercase or mixed case, although the most used convention is lowercase.
Browser Support:
The contenteditable attribute of HTML5 is effectively supported by all modern Browsers. IE8 supports it, but an older version of IE does not support this attribute.
Here, I am done with my article and hope this article is useful to you. Let me know if you have any suggestion/comments/questions on this trick/article.
