Contenteditable Attribute in HTML5
In this article I am going to describe about the use of contenteditable attribute in HTML5.
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
After Bold,Italic,Underline Button is pressed we will get the result as shown