Confessions and Confusions of Ashok M A. Personal and Professional Blog.

Ashok Mannolu Arunachalam, How toHTML5

How to make an editable text in HTML

Sometime making a text element editable makes sense such as div , span or p than having to create a text input field.

We can do the same using the contenteditable attribute of those elements.^_^

div {
cursor: pointer;
div:focus {
cursor: text;
<div contentEditable="true">This is editable!</div>

It comes really handy with one-way binding situations with frameworks like Angular/React/Vue.\O/

contenteditable attribute is only available in HTML5 O_o