contenteditable

contenteditable Attribute

The contenteditable global attribute determines whether an element is user-editable. When applied, the browser adjusts its interface to support editing.

Syntax

<element contenteditable="true | false"></element>

Example

The contenteditable attribute enables users to modify an element’s content. It accepts values like true (editable) or false (non-editable).

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

Values

• true or empty: The element becomes editable.
• false: Prevents the element from being edited.
• plaintext-only: Restricts editing to plain text, disabling rich text features.

Overview

The contenteditable attribute allows users to modify an element's content, with specific values controlling its editability.

Key Points

• contenteditable is enumerated, not Boolean, but it accepts true and false.
• The caret-color CSS property can be used to style the cursor.
• Editable elements are focusable and included in keyboard navigation. Nested contenteditable elements are excluded from the tab order unless tabindex="0" is set.

See Also

• All global attributes
• HTMLElement.contentEditable and HTMLElement.isContentEditable
• The CSS caret-color property
• HTMLElement input event

Conclusion

The contenteditable attribute is a powerful tool for enabling real-time text editing directly in the browser. It is useful for applications like live text editing, note-taking, and content management systems. By understanding its values and best practices, developers can create editable content areas while maintaining control over user input and styling.