HTML contenteditable Global Attribute

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

Description

The contenteditable global HTML attribute specifies whether the content of an element is editable by the user. It can be set to one of two values: true or false. If the attribute is not set, the element will inherit its editability from its parent element.

When an element is editable, the user can click or tap on it to focus it and then start typing to edit its content. The user can also use keyboard shortcuts to edit the content, such as Ctrl+C to copy and Ctrl+V to paste.

The contenteditable attribute can be applied to any HTML element, including <div>, <p>, <span>, and even <img>. This makes it a very versatile attribute for creating rich text editors, comment sections, and other forms of user-editable content.

Here are some examples of how to use the contenteditable attribute:

<p contenteditable="true">This paragraph is editable.</p>

<img contenteditable="true" src="https://example.com/image.jpg">

<div contenteditable="true">This div element is editable.</div>

It is important to note that the contenteditable attribute does not affect disabled elements. If an element is disabled, the user will not be able to edit its content, even if the contenteditable attribute is set to true.

Syntax

<element contenteditable = "true | false">

Values

  • trueIndicates that the item can be edited.
  • falseIndicates that the item cannot be edited.

Example

<p contenteditable="true">contentedible = true, try editing me.</p>
<p contenteditable="false">contentedible = false, try editing me (it will not work!).</p>

Browser Support

The following table will show you the current browser support for the HTML contenteditable Global Attribute.

Desktop
Edge Chrome Firefox Opera Safari
YesYesYesYesYes
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
YesYesYesYesYesYes

Last updated by CSSPortal on: 14th October 2023