AshKeys

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

Ashok Mannolu Arunachalam, How toHTML5
Back

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.^_^

html
<head>
<style>
div {
cursor: pointer;
}
div:focus {
cursor: text;
}
</style>
</head>
<body>
<div contentEditable="true">This is editable!</div>
</body>

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