Home
Products
Grids
Blog
Support
Donate
About
   

Playing with CSS contenteditable

Adding the contenteditable attribute to almost any HTML element makes it editable. This allows you to create richer forms.

A basic example

An editable, expanding div.
Molestie quis dolore autem delenit et eu dignissim et.
CSS
HTML
At present, most browsers limit the contenteditable attribute to a value of true or false, and the content is seen as HTML.

Setting the display property to inline-block allows the div to resize with the content. The min-width property sets a minimum width for the div.

Using contenteditable in forms

You can replace a form element with a contenteditable div and some basic JavaScript.
Nostrud dolor et esse
CSS
HTML
Script
The form contains a hidden textarea form element. The JavaScipt use the oninput event to copy the contents from the contenteditable div into the textarea form element.

If your contenteditable div has any default text it should also be included in the textarea form element.

A Twitter-alike contenteditable div

What you can do with a tad more JavaScript.
140
CSS
HTML
Script
The inline onkeypress event in the contenteditable div limits the input to 140 characters.

The addEventListener method looks for enter/return and submits the form. The oninput event again updates the hidden textarea form element, while also handling the character count.

Browser support for contenteditable is wide, and includes IE 11, Chrome 4+, Firefox 3.5+, Safari 3.1+, iOS Safari 5+ and Edge 12+.

Latest & featured