Menu
How (using jquery or javascript) can I make <div contenteditable></div> autogrow when I type more text in it?
608
You can add the contenteditable="true" HTML attribute to the element (a <div> for example) that you want to be editable. If you're anticipating a user to only update a word or two within a paragraph, then you could make a <p> itself editable.
contenteditable="inherit" Indicates that the element is editable if its immediate parent element is editable. This is the default value. When you add contenteditable to an element, the browser will make that element editable.
The contenteditable global attribute is an enumerated attribute indicating if the element should be editable by the user. If so, the browser modifies its widget to allow editing.
Angular does not have an accessor for contenteditable , so if you want to use it with forms you will have to write one.
Avoid giving a height style property, and the auto-resize should happen automatically. If you must give a height, use the min-height property instead:
<div contenteditable="true"
style="background: #ddd; border: 3px solid #ccc; min-height: 60px">
</div>
See it in action: FIDDLE
113
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
