Contenteditable Attribute in HTML5

In this article I am going to describe about the use of contenteditable attribute in HTML5.
  • 2007

Contenteditable Attribute

The contenteditable attribute is new in HTML5. It specifies whether the content of the element is editable or not.

This is an enumerated attribute whose keywords are the empty string, true, and false. The empty string and the true keyword map to the true state. The false keyword maps to the false state. In addition, there is a third state, the inherit state, which is the missing value default (and the invalid value default).

Browser Support

It is supported in all major browsers.

Syntax

<element contenteditable="true|false|inherit">

Attributes

    Value      Description
    True  Specifies that the element is editable.
    False  Specifies that the element is not editable.
    Inherit  Specifies that the element is editable if its parent is

 When you add contenteditable to an element, the browser will make that element editable. In addition, any children of that element will also become editable unless the child elements are  explicitly contenteditable = "false"

Example

<!DOCTYPE html>

 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <title>Script Tag</title>

</head>

<body>

    <h2>Implementation of Contenteditable Attribute in HTML5</h2>

    <button onclick="document.execCommand('bold',false,null);">Bold</button>

    <button onclick="document.execCommand('italic',false,null);">Italic</button>

    <button onclick="document.execCommand('underline',false,null);">Underline</button>

    <p contenteditable="true">

        <b>What is a computer?</b><br>

        A machine that can be programmed to do things with data.

 

Computers can usually:<br>

        * "input" data from a mouse, keyboard or touch-screen,<br>

        * "process" the data using a CPU and memory, and

        <br>

        * "output" the result onto a screen or save it to disk.<br>

    </p>

</body>

</html>

 

 Output

 contentedit.jpg

 After Bold,Italic,Underline Button is pressed we will get the result as shown

co.jpg

© 2019 DotNetHeaven. All rights reserved.