The contenteditable attribute is a global HTML attribute that specifies whether the user can change the content of an element.
Definition and Usage
➔ It can be applied to any HTML element, allowing inline editing of content.
➔ The contenteditable attribute accepts a few specific values:
- "true" or an empty string: Indicates that the element is editable.
- "false": Indicates that the element is not editable.
- "plaintext-only": Indicates that the element's raw text is editable, but rich text formatting (such as bold or italic) is disabled.
Syntax
//In HTML
<p contenteditable="true">You can edit this paragraph.</p>
<div contenteditable>You can also edit this div (empty string or no value is true).</div>
<h1 contenteditable="false">You cannot edit this heading.</h1>
//In JavaScript
const element= document.getElementById('sample');
element.contentEditable = "false";
element.contentEditable = "true";
//OR
element.setAttribute('contenteditable', 'true');
element.setAttribute('contenteditable', 'false');
Applies to
This attribute can be used on the following element.
| Attribute | Element |
|---|---|
| contenteditable | Global Attributes |
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML contenteditable attribute Example</title>
</head>
<body>
<h3>HTML contenteditable attribute Example</h3>
<p>The contenteditable attribute specifies whether the user can change the content of an element.</p>
<p contenteditable="true">You can edit this paragraph.</p>
<div contenteditable>You can also edit this div (empty string or no value is true).</div>
<h1 contenteditable="false">You cannot edit this heading.</h1>
</body>
</html>
Click on the "Try it Now" button to see how it works.