HTML contenteditable global attribute

BaselineWidely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Thecontenteditableglobal attribute is an enumerated attribute indicating if the element should be editable by the user. If so, the browser modifies its widget to allow editing.

Try it

<blockquote contenteditable="true">  <p>Edit this content to add your own quote</p></blockquote><cite contenteditable="true">-- Write your own name here</cite>

blockquote {  background: #eee;  border-radius: 5px;  margin: 16px 0;}blockquote p {  padding: 15px;}cite {  margin: 16px 32px;  font-weight: bold;}blockquote p::before {  content: "\201C";}blockquote p::after {  content: "\201D";}[contenteditable="true"] {  caret-color: red;}

Value

The attribute must take one of the following values:

true or anempty string, which indicates that the element is editable.
false, which indicates that the element is not editable.
plaintext-only, which indicates that the element's raw text is editable, but rich text formatting is disabled.

If the attribute is given without a value, like<label contenteditable>Example Label</label>, its value is treated as an empty string.

If this attribute is missing or its value is invalid, its value isinherited from its parent element: so the element is editable if its parent is editable.

Note that although its allowed values includetrue andfalse, this attribute is anenumerated one and not aBoolean one.

You can set the color used to draw the text insertioncaret with the CSScaret-color property.

Elements that are made editable, and therefore interactive, by using thecontenteditable attribute can be focused. They participate in sequential keyboard navigation. However, elements with thecontenteditable attribute nested within othercontenteditable elements are not added to the tabbing sequence by default. You can add the nestedcontenteditable elements to the keyboard navigation sequence by specifying thetabindex value (tabindex="0").

If content is pasted into an element withcontenteditable="true", all formatting is retained. If content is pasted into an element withcontenteditable="plaintext-only", all formatting is removed.

Examples

Pasting content into contenteditable

This example has two<div> elements withcontenteditable, the first with the valuetrue and the second with the valueplaintext-only. Copy the content below and paste it into eachdiv to see their effects.

HTML

<h2>Content to copy</h2><p>  Copy all the text in the block below and paste it into each of the  contenteditable blocks to compare the results.</p><section>  <div>    <p>      This is a paragraph containing <strong>Bold</strong>, <em>Italic</em>, and      <span>red</span> text, followed by an ordered list:    </p>    <ol>      <li>Step one</li>      <li>Step two</li>      <li>Step three</li>    </ol>  </div></section>

html

<h2>Pasting areas</h2><section>  <div>    <h3>contenteditable="true"</h3>    <div contenteditable="true"></div>  </div>  <div>    <h3>contenteditable="plaintext-only"</h3>    <div contenteditable="plaintext-only"></div>  </div></section>

h2 {  margin-bottom: 0;}.copying {  font-family: Georgia, serif;  margin: 1rem;  padding: 1rem;  border: solid black 1px;}.red {  color: red;}.pasting {  display: flex;  flex-direction: row;  gap: 1rem;  width: 100%;  .wrapper {    flex: 1 1;    margin: 0;    padding: 0;  }  h3 {    font-family: monospace;  }  [contenteditable] {    min-height: 3rem;    border: solid 1px;    padding: 0.5rem;    background-color: whitesmoke;  }  [contenteditable="true"] {    caret-color: blue;  }  [contenteditable="plaintext-only"] {    caret-color: red;  }}