Convert Editable DIV into a Text Field

convert div element into a textfield or textarea

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.

Demo

Shares

Recommended Articles

Leave a Reply

Pin It on Pinterest

Shares