contenteditableattribute to almost any HTML element makes it editable. This allows you to create richer forms.
contenteditableattribute to a value of
false, and the content is seen as HTML.
display property to
inline-block allows the div to resize with the content. The
min-width property sets a minimum width for the div.
textareaform element. The JavaScipt use the
oninputevent to copy the contents from the
contenteditablediv into the
contenteditable div has any default text it should also be included in the
textarea form element.
onkeypressevent in the
contenteditablediv limits the input to 140 characters.
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+.