HTML5 contenteditable attribute with demo

  • The HTML5 contenteditable attribute specifies whether or not a user is allowed to edit the content.
  • Editable content means the content that can be edited after being loaded on the Web browser.
  • We can make content of an HTML element as editable by using the contentEditable attribute.
  • The contenteditable attribute is supported in all major browsers.

<element contentEditable= [ value ]>

In the preceding syntax, element refers to an HTML element and the contentEditable attribute can take any of the following values:
  • true - Indicates that the element is editable.
  • false - Indicates that the element is not editable.
  • inherit - Indicates that the element is also editable if parent is editable.


In the preceding example, we have created a simple To do List. We have set the editablecontent of the div to true so that you can edit the list items and also can create new list item.

            We can confirm whether an element is editable or not by using the isContentEditable attribute, which returns true if the element is editable, and false if it is not. The syntax to use the isContentEditable attribute is as below:


In the preceding syntax, the element returns true if it is editable; otherwise, returns false.



Post a Comment