HTML5 contenteditable Global Attribute


The global attribute contenteditable is now supported in all major browsers (e.g. IE, firefox, chrome etc) in HTML5 definitions. It is used to specify whether a HTML tag is editable or not. The default value is ‘not’, obviously. The allowed options are: true, false, and inherit. The inherit specifies that the element is editable is its parent is.

This is a very useful global attribute and it has been used in many online web-based source code editng tools. The following is the simple syntax.

1
2
<element contenteditable="true|false|inherit">
</element>
<element contenteditable="true|false|inherit">
</element>

The following gives an example:

1
2
<p contenteditable="true">
This is a paragraph. It is editable. Try to change this text.
<p contenteditable="true">
This is a paragraph. It is editable. Try to change this text.

And, it will be interpreted in your browser like this.

This is a paragraph. It is editable. Try to change this text. (Not working because AMP does not support keyword contenteditable, hence removed.

**EDIT**: Open the Google Chrome Browser, and type in the following in the URL address bar:

data:text/html, <html contenteditable>

And you will have a simple text-editor.

–EOF (The Ultimate Computing & Technology Blog) —

GD Star Rating
loading...
266 words
Last Post: Easy Timeit Function in Python
Next Post: PHP Script to Check the Page Speed

The Permanent URL is: HTML5 contenteditable Global Attribute

Leave a Reply