Auto Stretch Textarea To Fit Its Content - jQuery autoResize

File Size: 6.82 KB
Views Total: 1734
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Auto Stretch Textarea To Fit Its Content - jQuery autoResize

autoResize is the simplest jQuery textarea resize plugin that automatically increases and decreases the height of your textarea element to fit its content.

Works perfectly with most CSS frameworks like Bootstrap, Bulma, TailwindCSS, etc.

How to use it:

1. Include the autoResize.js plugin after loading the latest jQuery library.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/Jquery.autoResize.js"></script>

2. Or directly insert the following JS snippets into your project.

$.fn.autoResize = function(){
  let r = e => {
    e.style.height = '';
    e.style.height = e.scrollHeight + 'px'
  };
  return this.each((i,e) => {
    e.style.overflow = 'hidden';
    r(e);
    $(e).bind('input', e => {
      r(e.target);
    })
  })
};

3. Call the function autoResize on your textarea and done.

$('textarea').autoResize();

This awesome jQuery plugin is developed by gdrone. For more Advanced Usages, please check the demo page or visit the official website.