October 30, 2019
Advice I Wish I Could Take For Myself
How To Auto-Grow A Text Area

Today I was messing around with my admin side of things and I discovered that my textareas were not behaving the way I wanted them to. I want them to grow when you type into them. I had this complicated code written out to accomplish this, but I thought, "there's gotta be a better way." So here's my code.

  • <textarea></textarea>
  • <script>
  • $('textarea').each(function(){
  • var that = $(this);
  • that.css('box-sizing','border-box'); //-> required to get the correct height of input
  • function resizeInput(){ //-> create function so I can place it in many different locations
  • that.stop(true,true).animate({
  • 'min-height':that.get(0).scrollHeight
  • });
  • }
  • resizeInput(); //-> resize on page load
  • that.off('keydown').on('keydown',function(){ //-> resize when you type, keydown is efficient
  • resizeInput();
  • });
  • });
  • </script>

I want this to apply to every single textarea that's on my pages. For some reason you have to make sure that the 'box-sizing' attribute is set to 'border-box'. Instead of checking first, I'll just set the attribute so there's no confusion in the future. Then you set the height to the scroll height you find using jQuery. I set the min-height to that so I can still resize the box bigger if I want to. This might be personal preference, but sometimes while I work in a textarea I like to give myself extra room to type things. Setting the min-height to the scroll height will allow me to make it bigger if I choose to.

I use the animate function so that it looks a little nicer, but you can use .css({}); if you want it to happen quicker.

 Profile Picture