Definition and Usage

The contenteditable attribute specifies whether the content of an element is editable.

When set to true, the content of the element can be edited. When set to false, the content cannot be edited.

The contenteditable attribute is one of the global HTML attributes that allows users to directly edit the text or content inside the element.

Using this attribute enables simple text editing on a web page. Combined with JavaScript, it is possible to build inline text editors.

Basic Example

HTML 
<div contenteditable="true" style="padding: 15px; background: #eee; border-radius: 5px;">
    Try editing this content directly.
</div>
Live Example Preview You can edit the content directly in the box above.

Syntax

HTML 
<element contenteditable="true|false|plaintext-only">

Values

Values for the contenteditable Attribute
true Enables the content of the element to be editable by the user. When the user clicks or focuses on the element, they can modify the text.
"" (empty string) Treated the same as true. An empty string value makes the content editable.
false Disables editing of the element's content. The user cannot click or modify the text inside the element.
plaintext-only Editing is limited to plain text. Formatting such as HTML tags, CSS styles, and JavaScript code will not take effect.

contenteditable="true" vs. contenteditable="plaintext-only"

This example clearly demonstrates the difference between contenteditable="true" and contenteditable="plaintext-only".

Copy the sample text below and paste it into each element to see how the two modes behave differently.

HTML 
<p>contenteditable="true"</p>
<div contenteditable="true">
    Paste the copied text here!
</div>
<p>contenteditable="plaintext-only"</p>
<div contenteditable="plaintext-only">
    Paste the copied text here!
</div>
Copy This Text
Paste the Copied Text Below

contenteditable="true" preserves the formatting of the pasted text, while contenteditable="plaintext-only" strips all formatting.

Things to Keep in Mind

As you can see from the allowed values, the contenteditable attribute is not a boolean attribute. It is an enumerated attribute.

Reminder:
A boolean attribute is true when the attribute is present in markup, and false when it is absent. An enumerated attribute, on the other hand, requires an explicit value.

If no value is provided, it is treated as an empty string (""), which is equivalent to true. You can confirm this behavior in the example below.

HTML 
<div contenteditable style="padding: 15px; background: #eee; border-radius: 5px;">
    Try editing this content directly.
</div>
Live Example Preview

Elements Where the contenteditable Attribute Does Not Apply

In HTML, certain traditional user-input elements have built-in behaviors that prevent the contenteditable attribute from having any effect.

  • <input>
  • <textarea>

Browser compatibility

Browser compatibility for the contenteditable Attribute
Attribute
Desktop Chrome
Chrome
DesktopDesktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
contenteditable 1 12 3 4
contenteditable="plaintext-only" 51 12 136 13.1

Specifications

Specification for the contenteditable Attribute
Specification
contenteditable HTML Standard
#attr-contenteditable

References