Open In App

HTML contenteditable Attribute

Improve
Improve
Like Article
Like
Save
Share
Report

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: 

contenteditableAttribute

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:

contenteditableAttribute2

HTML contenteditable Attribute example output

Supported Browsers

The browser supported by contenteditable attribute are listed below: 



Last Updated : 07 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads