HTML attribute contenteditable – make an element editable

HTML attribute contenteditable makes an element editable. Few things to note about attribute contenteditable

  1. Its value can be empty string, true or false. Empty string is treated as true.
  2. It is inherited by default. So missing value will inherit the value from parent container.

Example – contenteditable div

<style>
div {
  background-color: lightgreen; margin: 2px;
}
</style>
<div contenteditable="true">
This is editable content in a div
</div>
<div contenteditable="false">
This is non editable content in a div
</div>

refresh

Example – contenteditable span

<style>
span {
  background-color: lightgreen; margin: 2px;
}
</style>
<span contenteditable="true">
This is editable content in a span
</span>
<span contenteditable="false">
This is non editable content in a span
</span>
refresh

Specification and Browser compatibility

SpecificationStatusCategories
contenteditable attribute (basic support)WHATWG Living StandardHTML5
Desktop
ChromeFirefoxIEEdgeSafariOpera
Yes 4+ Yes 3.5+ Yes 5.5+ Yes 12+ Yes 3.1+ Yes 9+
Mobile
Android ChromeAndroid FirefoxiOS SafariIE MobileOpera Mobile
Yes 47+ Yes 44+ Yes 5.0-5.1+ Yes 10+ Yes 12.1+
source: caniuse.com
Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments