HTML contenteditable Attribute

The contenteditable attribute specifies that an element is editable in-line. Clicking on the element places the text in edit mode.

Example

#

A contenteditable attribute on a <p> element.
Click the paragraph and start editing the text.

Impressionism

Radicals in their time, early Impressionists violated the rules of academic painting. They constructed their pictures from freely brushed colors that took precedence over lines and contours, following the example of painters such as Eugène Delacroix and J. M. W. Turner. They also painted realistic scenes of modern life, and often painted outdoors. Previously, still life drawings and portraits as well as landscapes were usually painted in a studio. The Impressionists found that they could capture the momentary and transient effects of sunlight by painting outdoors. They portrayed overall visual effects instead of details, and used short "broken" brush strokes of mixed and pure unmixed color — not blended smoothly or shaded, as was customary — to achieve an effect of intense color vibration.

<h3>Impressionism</h3>
<p contenteditable="true">
   Radicals in their time, early <b>Impressionists</b> violated 
   the rules of academic painting. They constructed their 
   pictures from freely brushed colors that took precedence 
   over lines and contours, following the example of painters 
   such as Eugène Delacroix and J. M. W. Turner. They also 
   painted realistic scenes of modern life, and often painted 
   outdoors. Previously, still life drawings and portraits as 
   well as landscapes were usually painted in a studio. 
   The Impressionists found that they could capture the 
   momentary and transient effects of sunlight by painting 
   outdoors. They portrayed overall visual effects instead 
   of details, and used short "broken" brush strokes of 
   mixed and pure unmixed color — not blended smoothly 
   or shaded, as was customary — to achieve an effect of 
   intense color vibration.
</p>

Using contenteditable

The contenteditable attribute specifies whether an HTML element is editable.

This attribute attribute allows users to read the content and also edit it 'in-place'.

If contenteditable is not included or invalid, its value will be inherited from the parent element.

Note:  The contenteditable attribute is a global attribute that can be applied to any tag.


Syntax

<tag contenteditable="true|false" />

Values

#

Value Description
true Allows the element to be editable.
false Disallows the element to be editable.

Browser support

Here is when contenteditable support started for each browser:

Chrome
4.0 Jan 2010
Firefox
3.5 Jun 2009
Edge
6.0 Aug 2001
Opera
10.1 Jun 2010
Safari
3.1 Mar 2008

You may also like



Guides