DEV Community

Youn
Youn

Posted on

HTML contenteditable Attribute

#html #contenteditable #attribute

😄 This post is based on the content from coding.courses.

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 

<div contenteditable="true" style="padding: 15px; background: #eee; border-radius: 5px;">
    Try editing this content directly.
</div>
Enter fullscreen mode Exit fullscreen mode

Syntax 

<element contenteditable="true|false|plaintext-only">
Enter fullscreen mode Exit fullscreen mode

Values

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

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.
If no value is provided, it is treated as an empty string (""), which is equivalent to true.

Elements Where the contenteditable Attribute Does Not Apply

  • <input>
  • <textarea>

References

HTML contenteditable Attribute – Making HTML Elements Editable - codingCourses

The contenteditable attribute specifies whether the content of an element is editable. When set to true, the content becomes editable. When set to false, editing is disabled.

favicon coding.courses

Top comments (1)

Collapse
 
bhavin-allinonetools profile image
Bhavin Sheth •

The plaintext-only value is especially useful for simple editors where you want to avoid pasted HTML and formatting. I’ve found it handy for keeping user-generated content predictable without extra sanitization headaches.