contenteditable

The Basics # First, let’s check out the spec: 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). — WHATWG The contenteditable attribute was mainly intended for providing an in-browser rich-text or WYSIWYG experience. You’ve likely seen this sort of thing in blog-based authoring tools like Symphony or sites like Flickr where you can begin editing page content simply by clicking in a given area. As mentioned above, contenteditable has three possible states: contenteditable="" or contenteditable="true" Indicates that the element is editable. contenteditable="false" Indicates that the element is not editable. contenteditable="inherit" Indicates that the element is editable if its immediate parent element is editable. This is the default value. 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" . First, let’s check out the spec:Theattribute was mainly intended for providing an in-browser rich-text or WYSIWYG experience. You’ve likely seen this sort of thing in blog-based authoring tools like Symphony or sites like Flickr where you can begin editing page content simply by clicking in a given area. As mentioned above,has three possible states:When you addto 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

Code Example # Here’s some example code to get us started: <div id="example-one" contenteditable="true"> <style scoped> #example-one { margin-bottom: 10px; } [contenteditable="true"] { padding: 10px; outline: 2px dashed #CCC; } [contenteditable="true"]:hover { outline: 2px dashed #0090D2; } </style> <p>Everything contained within this div is editable in browsers that support <code>HTML5</code>. Go on, give it a try: click it and start typing.</p> </div> Putting it together Here’s some example code to get us started:

Live examples # Here are two basic-but-live examples showing what you can do with contenteditable . Example One # Everything contained within this div is editable in browsers that support HTML5 . Go on, give it a try: click it and start typing. Live text editing I’ve used CSS to create an obvious visual cue that this area of text is different from the rest. Note that I’ve future-proofed this with <style scoped> , which I’ve used CSS to create an obvious visual cue that this area of text is different from the rest. Note that I’ve future-proofed this with, which I covered in my previous article Example Two # <style> element is set to display: none by the user agent, we need to set it to block for this code to work. Try editing the CSS below: Live CSS editing Chris Coyier of CSS-Tricks pointed out that you can let your users edit the CSS in real-time. Because theelement is set toby the user agent, we need to set it tofor this code to work. Try editing thebelow: Here are two basic-but-live examples showing what you can do with

Browser Support # Browser support for contenteditable is surprisingly good: Browser Support for contenteditable Browser Version Chrome 4.0+ Safari 3.1+ Mobile Safari 5.0+ Firefox 3.5+ Opera 9.0+ Opera Mini/Mobile N/A Internet Explorer 5.5+ Android 3.0+ We have to give credit where it’s due and point out that Internet Explorer has supported this attribute since IE5.5. In fact, a very early iteration of contenteditable was . For a more in-depth compatibility table, visit Browser support foris surprisingly good:We have to give credit where it’s due and point out that Internet Explorer has supported this attribute since IE5.5. In fact, a very early iteration ofwas . For a more in-depth compatibility table, visit When Can I Use…

Storing the Changes # For this section, I went straight to Doctor Remy for help, as he is much more knowledgeable than me when it comes to storing your data everything. Depending on the complexity of your editable block, your code could be listening for the enter key (keyCode 13) to save the changes, and the escape key (keyCode 27) to undo the changes. When the user hits enter (assuming it’s a single line of editable content), it would grab the innerHTML of the editable field and send an Ajax post to your server with the change. A simple example of this can be seen on JS Bin: contenteditable saving to Ajax — Remy Sharp For this section, I went straight to Doctor Remy for help, as he is much more knowledgeable than me when it comes toeverything.

Conclusion # We’ve repeated the phrase “paving the cowpaths” all over this site, and I’m mentioning it again with the introduction of the contenteditable attribute. The spec finally makes official something that’s been implemented by browser makers for years. Although this is one of the lesser-known new attributes, I bet you’ll find yourself using it more often than you would think. Imagine being able to simply click a block of content and start making changes instantly: making quick corrections to an article in-place, allowing users to edit their comments, or even building spreadsheets within company applications that aren’t hooked up to any sort of back-end user interface. If you can think of other uses for this attribute, then head on down to the comments section and tell us where else you think this could be implemented. We’ve repeated the phrase “paving the cowpaths” all over this site, and I’m mentioning it again with the introduction of theattribute. The spec finally makes official something that’s been implemented by browser makers for years. Although this is one of the lesser-known new attributes, I bet you’ll find yourself using it more often than you would think. Imagine being able to simply click a block of content and start making changes instantly: making quick corrections to an article in-place, allowing users to edit their comments, or even building spreadsheets within company applications that aren’t hooked up to any sort of back-end user interface. If you can think of other uses for this attribute, then head on down to the comments section and tell us where else you think this could be implemented.

For some time now, we’ve been using various technologies to edit and store text within a web browser. Now with theattribute, things have got a whole lot easier. In this article, I’ll tell you what this attribute is for, how it works, and how we can take things further.