InfoHeap
Tech tutorials, tips, tools and more
Navigation
  • Home
  • Tutorials
    • CSS tutorials & examples
    • CSS properties
    • Javascript cookbook
    • Linux/Unix Command Line
    • Mac
    • PHP
      • PHP functions online
      • PHP regex
    • WordPress
  • Online Tools
    • Text utilities
    • Online Lint Tools
search

HTML tag attributes

  • HTML5 - input placeholder
  • html attribute contenteditable
  • script async attribute
 
  • Home
  • > Tutorials
  • > HTML
  • > HTML tag attribute

HTML attribute contenteditable – make an element editable

on Mar 22, 2016

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 done
try it online

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 done
try it online

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

Suggested posts:

  1. CSS attribute substring selectors
  2. CSS attribute presence and value selectors
  3. PHP – empty() vs isset() vs is_null() vs boolean check
  4. CSS :empty – define style for empty element
  5. jQuery – difference between html() and text()
  6. HTML li tag
  7. HTML ol tag
  8. Bash – set default value if a variable is empty
Share this article: share on facebook share on linkedin tweet this submit to reddit
Posted in Tutorials | Tagged HTML, HTML tag attribute, HTML5, Tutorials

Follow InfoHeap

facebook
twitter
googleplus
  • Browse site
  • Article Topics
  • Article archives
  • Recent Articles
  • Contact Us
  • Omoney
Popular Topics: AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | Linux | Linux/Unix Command Line | Mac | Mac Command Line | Mysql | Networking | Node.js | Online Tools | PHP | PHP cookbook | PHP Regex | Python | Python array | Python cookbook | SEO | Site Performance | SSH | Ubuntu Linux | Web Development | Webmaster | Wordpress | Wordpress customization | Wordpress How To | Wordpress Mysql Queries

Copyright © 2021 InfoHeap.

Powered by WordPress