Using an enumerated HTML attribute called contentEditable, you can turn an HTML div element into an editable textbox or textarea.
Make an editable div look like a textfield
<html>
<div contenteditable="true"></div>
</html>Make an editable div look like a textarea
<html>
<div contenteditable="true"></div>
</html>
<style>
div {
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
resize: both;
height: 30px;
box-shadow: inset 0px 1px 2px #666;
}
</style>When we call the contentEditable and assign to ‘true’, the document.execCommand() method is made available and the browser modifies its widgets to allow editing DOM element.
We would be using this, in a scenario where you would need to create an excel-like application or building data entry apps, etc.