JavaBeat

  • Home
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Privacy
  • Contact Us

HTML5 Contenteditable Attribute

March 15, 2014 by Krishna Srinivasan Leave a Comment

The contenteditable attribute is used to edit the text in the browser. If the contenteditable is specified as true then the content can be edited or if it’s set as false then the content in the browser cannot be editable. In the modern web, most of the websites offer an option to the user for editing the values in a web page and save it to the session or local storage for the future use. However, there is no built-in editor support for this functionality till HTML4, in HTML5 contenteditable makes it easy for the web designers to have edit form within the page itself.

Defined in HTML5 spec as:

The contenteditable attribute 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). ( Reference )

Syntax Of <contenteditable> Attibute

[code lang=”html”]
<element contenteditable= "true /false">;
[/code]

Contenteditable States

contenteditable attribute can have three states:

  • contenteditable=”” or contenteditable=”true”: It means that the content can be edited.
  • contenteditable=”false”: It means the content cannot be edited.
  • contenteditable=”inherit”: It means the element is editable if its immediate parent element is editable. This is the default behaviour.

HTML5 Contenteditable Example

Following example demostrates all the above three states:

[code lang=”html”]

<!DOCTYPE html>
<html>
<head>
<title> Contenteditable Attribute</title>
</head>
<body>
<div id="editor-1" contenteditable="">
<p>You can edit me as <i>contenteditable</i> is set to <i>""</i>. </p>
</div>
<div id="editor-2" contenteditable="true">
<p>You can edit me as <i>contenteditable</i> is set to <i>true</i>. </p>
</div>
<div id="editor-3" contenteditable="false">
<p>You cannot edit me as <i>contenteditable</i> is set to <i>false</i>. </p>
</div>
<div id="editor-4" contenteditable="true">
<p>You cannot edit me as <i>contenteditable</i> is set to <i>true</i>. </p>
<div id="editor-5">
<p>You cannot still edit me as i’v inherited the parent properties. </p>
</div>
</div>
</body>
</html>
[/code]

Here you can see that we are testing all the three states of the contenteditable attribute.

Example Application Test

  • Save the file as contenteditable_example in your system.
  • Just open the file in the browser, you will see the below picture in the browser. Note that the browser must support HTML5 specification.

Output

When the execution process is completed successfully we will get the following output. In the below screenshot the highlighted or border line is editable text where cursor is pointed.
HTML5 Contenteditable Attribute

HTML5 Contenteditable Attribute2

HTML5 Contenteditable Attribute3

Filed Under: HTML Tagged With: HTML5

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Follow Us

  • Facebook
  • Pinterest

As a participant in the Amazon Services LLC Associates Program, this site may earn from qualifying purchases. We may also earn commissions on purchases from other retail websites.

JavaBeat

FEATURED TUTORIALS

Answered: Using Java to Convert Int to String

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Copyright © by JavaBeat · All rights reserved