HTML contenteditable Attribute
Last Updated :
07 Mar, 2024
The HTML contenteditable attribute determines if element content is editable. It defaults to inheriting from the parent element. As a global attribute, it allows versatile content manipulation within the webpage directly.
Syntax
<element contenteditable = "true|false">
Supported Tags
It supports all HTML elements.Â
Attribute Value
A contenteditable attribute is mainly an instance of a Global Attribute and it can be used in any HTML element. This attribute value contain the following values:
Attribute Value |
Description |
true or empty string |
Indicates the element is editable. |
false |
Indicates the element is not editable. |
plaintext-only |
Indicates the raw text of the element is editable, while rich text features are disabled. |
HTML contenteditable Attribute Examples
Example 1:Â In this example we use contenteditable attribute enables editing within specified elements. Here, a paragraph is made editable, allowing direct manipulation of its text content.
html
<!DOCTYPE html>
< html >
< head >
< title >contenteditable attribute</ title >
</ head >
< body >
< h2 >contenteditable attribute</ h2 >
< p contenteditable = "true" >
GeeksforGeeks: A computer science
portal for geeks
</ p >
</ body >
</ html >
|
Output:Â
HTML contenteditable Attribute example output
Example 2: In this example we use contenteditable attribute allows direct editing of specified elements. Here, paragraphs are made editable with “true” and “plaintext-only” values, enabling text manipulation within the webpage.
HTML
<!DOCTYPE html>
< html >
< head >
< title >contenteditable attribute</ title >
</ head >
< body >
< h2 >contenteditable attribute</ h2 >
< p contenteditable = "true" >
GeeksforGeeks
</ p >
< p contenteditable = "plaintext-only" >
GeeksforGeeks
</ p >
</ body >
</ html >
|
Output:
HTML contenteditable Attribute example output
Supported Browsers
The browser supported by contenteditable attribute are listed below:Â
Share your thoughts in the comments
Please Login to comment...