1. Technology

contenteditable

By

Contenteditable Attribute Description:

The contenteditable attribute is a boolean (true or false) attribute that defines if the content within the element is editable.

This attribute is valid in HTML5.

The Contenteditable Attribute is Used with These Tags:

The contenteditable is a core HTML attribute and is valid in any HTML element. However, it is most effective when used in elements that contain content that can be edited, such as text elements like P, LI, and so on. But you can place it on top-level container tags like HTML or BODY to indicate that everything on the page can be edited.

The Contenteditable Attribute Values:

The contenteditable attribute is a boolean attribute, so its values are either true or false. You can also use the value inherit to indicate that it should be the same as any parent element.

While you can use it just like any other empty attribute by specifying just the attribute (e.g. <body contenteditable>), it is safer to specify either true or false to be clear which you mean. There have been instances of browsers defining empty attributes opposite of what is expected when the value is removed.

Contenteditable Default Value:

The contenteditable has a default value of inherit. This means that the element will keep the same value as the parent element.

Contenteditable Examples:

Here is an example of an INPUT field with a contenteditable attribute.

Here is an example of a paragraph that is editable:

<p contenteditable="true">

And another paragraph where editing is explicitly turned off:

<p contenteditable="false">

By using the boolean values you can also use scripting to change the property later.

Contenteditable Attribute DTD:

HTML5

<doctype html>

Contenteditable is Valid in HTML Versions:

  • HTML5
  • XHTML5

Notes About Contenteditable:

When you use the contenteditable attribute set to true this means that users can change the contents of a web page. If you are not validating that input this can compromise your website if a malicious user injects control charactesr or a script into your site. At a minimum you should be taint checking any user-submitted content that is used on your website.

Learn more about the contenteditable attribute in the article: Making Web Page Content Editable by Users.

©2014 About.com. All rights reserved.