Dynamically expand a textarea based on the amount of text


/ Published in: JavaScript
Save to your folder(s)



Copy this code and paste it in your HTML
  1. <!DOCTYPE HTML>
  2. <html>
  3. <body>
  4. <textarea id="txtarea" style="width: 100px;,font-size: 16px;line-height: 1; height: 16px;"></textarea>
  5. <script type="text/javascript">
  6.  
  7. document.getElementById('txtarea').addEventListener('keyup', function () {
  8. this.style.height = 0; // this is necessary to make it shrink when deleting
  9. this.style.height = this.scrollHeight + 'px';
  10. }, false);
  11.  
  12. </script>
  13. </body>
  14. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.