use editable controls with contenteditable attribute - HTML5

There are various technologies available to edit text and store in web browser, but using contenteditable attribute (HTML5) is too easy to make any control editable in a web page.

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).

SYNTAX

element . contentEditable [ = value ]

Returns "true", "false", or "inherit", based on the state of the contenteditable attribute.

Can be set, to change that state.

Throws a SyntaxError exception if the new value isn't one of those strings.

element . isContentEditable

Returns true if the element is editable; otherwise, returns false.

The contenteditable attribute was mainly intended for providing an in-browser rich-text or WYSIWYG experience. You’ve likely seen this sort of thing in blog-based authoring tools like Symphony or sites like Flickr where you can begin editing page content simply by clicking in a given area.

As mentioned above, contenteditable has three possible states:

contenteditable="" or contenteditable="true"

Indicates that the element is editable.

contenteditable="false"

Indicates that the element is not editable.

contenteditable="inherit"

Indicates that the element is editable if its immediate parent element is editable. This is the default value.

When you add contenteditable to an element, the browser will make that element editable. In addition, any children of that element will also become editable unless the child elements are explicitly contenteditable="false".

Code Example #

Here’s some example code to get us started:

<div id="example-one" contenteditable="true">
<style scoped>
  #example-one { margin-bottom: 10px; }
  [contenteditable="true"] { padding: 10px; outline:2px dashed #CCC; }
  [contenteditable="true"]:hover { outline: 2px dashed#0090D2; }
</style>
<p>Everything contained within this div is editable in browsers that support <code>HTML 5</code>. Go on, give it a try: click it and start typing. Tech Impulsion</p>
</div>

LIVE EXAMPLE.

Everything contained within this div is editable in browsers that support HTML 5. Go on, give it a try: click it and start typing. Tech Impulsion