HTML contenteditable Global Attribute
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 | |||||
Yes | Yes | Yes | Yes | Yes |
Tablets / Mobile | |||||
Yes | Yes | Yes | Yes | Yes | Yes |
Last updated by CSSPortal on: 14th October 2023