AshKey's Logo
ServicesAbout Us

AshKeys

Confessions and Confusions of a Freelance Fullstacker.

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