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:
The supported values of the contenteditable are:
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.
Edit this paragraph
Can not edit this paragraph
You can directly use the contenteditable attribute in the newer browser without assignment.
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.
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.
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.