In this quick tip, we'll learn how to make content editable within any element like paragraph, ordered list etc editable. With HTML5, we have a new attribute called contenteditable which is used to make content editable as it's name implies. The content including the child elements can be edited by the user.
Here are few lines borrowed from w3schools:
"The contenteditable attribute specifies whether the content of an element is editable or not
Note
When the contenteditable attribute is not set on an element, the element will inherit it from its parent."
So, the question is, where to use this?
An example can be, an app which uses local storage and tries to present an interface like to do list or quick comments on someting for next steps.
Note
The grey outline around the element on hover marks that the element is set to be editable using contenteditable attribute.
Syntax
Example
- <!DOCTYPE html>
- <html lang="en">
-
- <head>
- <title>Demo</title>
- </head>
-
- <body>
- <section id="editable" contenteditable="true">
- <h2>Go ahead, edit away!</h2>
- <p>Here's a typical paragraph element</p>
- <ol>
- <li>and now a list</li>
- <li>with only</li>
- <li>three items</li>
- </ol>
- </section>
- </body>
-
- </html>
Demo (third party)
html5demos.com/contenteditable
Hope, you liked this small tip. Please share your feedback.
Thanks for reading!