Creating a textarea with auto-resize

Question

There was another thread about this  which I ve tried  But there is one problem  the textarea doesn t shrink if you delete the content  I can t find any way to shrink it to the correct size - the clientHeight value comes back as the full size of the textarea  not its contents   The code from that page is below   function FitToContent id  maxHeight       var text   id  amp  amp  id style   id   document getElementById id      if    text         return      var adjustedHeight   text clientHeight     if    maxHeight    maxHeight  gt  adjustedHeight              adjustedHeight   Math max text scrollHeight  adjustedHeight         if   maxHeight            adjustedHeight   Math min maxHeight  adjustedHeight         if   adjustedHeight  gt  text clientHeight            text style height   adjustedHeight    px           window onload   function         document getElementById  ta   onkeyup   function           FitToContent  this  500

User · Answer

You can use this piece of code to compute the number of rows a textarea needs:

textarea.rows = 1;
    if (textarea.scrollHeight > textarea.clientHeight)
      textarea.rows = textarea.scrollHeight / textarea.clientHeight;

Compute it on input and window:resize events to get auto-resize effect. Example in Angular:

Template code:

<textarea rows="1" reAutoWrap></textarea>

auto-wrap.directive.ts

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: 'textarea[reAutoWrap]',
})
export class AutoWrapDirective {

  private readonly textarea: HTMLTextAreaElement;

  constructor(el: ElementRef) {
    this.textarea = el.nativeElement;
  }

  @HostListener('input') onInput() {
    this.resize();
  }

  @HostListener('window:resize') onChange() {
    this.resize();
  }

  private resize() {
    this.textarea.rows = 1;
    if (this.textarea.scrollHeight > this.textarea.clientHeight)
      this.textarea.rows = this.textarea.scrollHeight / this.textarea.clientHeight;
  }

}

User · Answer

I used the following code for multiple textareas  Working fine in Chrome 12  Firefox 5 and IE 9  even with delete  cut and paste actions performed in the textareas   x000D   x000D  function attachAutoResizeEvents       for  i   1  i  lt   4  i          var txtX   document getElementById  txt    i      var minH   txtX style height substr 0  txtX style height indexOf  px        txtX onchange   new Function  resize this     minH            txtX onkeyup   new Function  resize this     minH            txtX onchange txtX  minH         function resize txtX  minH      txtX style height    auto     required when delete  cut or paste is performed   txtX style height   txtX scrollHeight    px    if  txtX scrollHeight  lt   minH      txtX style height   minH    px    window onload   attachAutoResizeEvents x000D  textarea     border  0 none    overflow  hidden    outline  none    background-color   eee   x000D   lt textarea style  height 100px font-family arial  id  txt1  gt  lt  textarea gt   lt textarea style  height 125px font-family arial  id  txt2  gt  lt  textarea gt   lt textarea style  height 150px font-family arial  id  txt3  gt  lt  textarea gt   lt textarea style  height 175px font-family arial  id  txt4  gt  lt  textarea gt  x000D   x000D   x000D

User · Answer

This works for me  Firefox 3 6 4 0 and Chrome 10 11     x000D   x000D  var observe  x000D  if  window attachEvent    x000D      observe   function  element  event  handler    x000D          element attachEvent  on  event  handler   x000D         x000D    x000D  else   x000D      observe   function  element  event  handler    x000D          element addEventListener event  handler  false   x000D         x000D    x000D  function init      x000D      var text   document getElementById  text    x000D      function resize      x000D          text style height    auto   x000D          text style height   text scrollHeight  px   x000D        x000D         0-timeout to get the already changed text    x000D      function delayedResize      x000D          window setTimeout resize  0   x000D        x000D      observe text   change    resize   x000D      observe text   cut       delayedResize   x000D      observe text   paste     delayedResize   x000D      observe text   drop      delayedResize   x000D      observe text   keydown   delayedResize   x000D   x000D      text focus    x000D      text select    x000D      resize    x000D    x000D  textarea   x000D      border  0 none white  x000D      overflow  hidden  x000D      padding  0  x000D      outline  none  x000D      background-color   D0D0D0  x000D    x000D   lt body onload  init     gt  x000D   lt textarea rows  1  style  height 1em   id  text  gt  lt  textarea gt  x000D   lt  body gt  x000D   x000D   x000D    If you want try it on jsfiddle It starts with a single line and grows only the exact amount necessary  It is ok for a single textarea  but I wanted to write something where I would have many many many such textareas  about as much as one would normally have lines in a large text document   In that case it is really slow   In Firefox it s insanely slow   So I really would like an approach that uses pure CSS  This would be possible with contenteditable  but I want it to be plaintext-only

User · Answer

Native Javascript solution without flickering in Firefox and faster than method withclientHeight      1  Add div textarea selector to all your selectors containing textarea  Do not forget to add box-sizing  border-box    2  Include this script   function resizeAll        var textarea document querySelectorAll  textarea       for var i textarea length-1  i gt  0  i--        resize textarea i       function resize textarea       var div   document createElement  div       div setAttribute  class   textarea       div innerText textarea value   r n      div setAttribute  style   width   textarea offsetWidth  px display block height auto left 0px top 0px position fixed z-index -200 visibility hidden word-wrap break-word overflow hidden        textarea form appendChild div      var h div offsetHeight     div parentNode removeChild div      textarea style height h  px      function resizeOnInput e       var textarea document querySelectorAll  textarea       for var i textarea length-1  i gt  0  i--        textarea i  addEventListener  input  function e  resize e target   return false   false      window addEventListener  resize  function   resizeAll      false   window addEventListener  load  function   resizeAll      false   resizeOnInput      Tested on IE11  Firefox and Chrome   This solution creates div similar to your textarea including internal text and measures height

User · Answer

There is a slightly different approach    lt div style  position  relative  gt     lt pre style  white-space  pre-wrap  word-wrap  break-word  gt  lt  pre gt     lt textarea style  position  absolute  top  0  left  0  width  100   height  100   gt  lt  textarea gt   lt  div gt    The idea is to copy the text from textarea into the pre and let CSS make sure that they have the same size   The benefit is that frameworks present simple tools to move text around without touching any events  Namely  in AngularJS you would add a ng-model  foo  ng-trim  false  to the textarea and ng-bind  foo     n   to the pre  See a fiddle   Just make sure that pre has the same font size as the textarea

User · Answer

This is a jQuery version of Moussawi7 s answer   x000D   x000D    function          textarea auto-grow   on  input   function         var element     this  0       element style height    5px       element style height    element scrollHeight     px            x000D  textarea     resize  none    overflow  auto    width  100     min-height  50px    max-height  150px    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt   lt textarea class  auto-grow  gt  lt  textarea gt  x000D   x000D   x000D

User · Answer

I recommend the javascript library from http   javierjulio github io textarea-autosize   Per comments  add example codeblock on plugin usage    lt textarea class  js-auto-size  rows  1  gt  lt  textarea gt    lt script src  http   code jquery com jquery-2 1 0 min js  gt  lt  script gt   lt script src  jquery textarea autosize min js  gt  lt  script gt   lt script gt     textarea js-auto-size   textareaAutoSize     lt  script gt    Minimum required CSS   textarea     box-sizing  border-box    max-height  160px     optional but recommended   min-height  38px    overflow-x  hidden     for Firefox  issue  5

User · Answer

A COMPLETE YET SIMPLE SOLUTION Updated 2020-05-14  Improved browser support for mobiles and tablets  The following code will work   On key input  With pasted text  right click  amp  ctrl v   With cut text  right click  amp  ctrl x   With pre-loaded text  With all textarea s  multiline textbox s  site wide  With Firefox  v31-67 tested   With Chrome  v37-74 tested   With IE  v9-v11 tested   With Edge  v14-v18 tested   With IOS Safari  With Android Browser  With JavaScript strict mode  Is w3c validated  And is streamlined and efficient    OPTION 1  With jQuery  This option requires jQuery and has been tested and is working with 1 7 2 - 3 3 1 Simple  Add this jquery code to your master script file and forget about it    x000D   x000D     textarea   each function        this setAttribute  style    height      this scrollHeight     px overflow-y hidden        on  input   function        this style height    auto     this style height    this scrollHeight     px       x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt   lt textarea placeholder  Type  paste  cut text here     gt PRELOADED TEXT  This javascript should now add better support for IOS browsers and Android browsers  lt  textarea gt   lt textarea placeholder  Type  paste  cut text here     gt  lt  textarea gt  x000D   x000D   x000D   Test on jsfiddle  OPTION 2  Pure JavaScript  Simple  Add this JavaScript to your master script file and forget about it    x000D   x000D  const tx   document getElementsByTagName  textarea    for  let i   0  i  lt  tx length  i        tx i  setAttribute  style    height      tx i  scrollHeight     px overflow-y hidden       tx i  addEventListener  input   OnInput  false      function OnInput       this style height    auto     this style height    this scrollHeight     px     x000D   lt textarea placeholder  Type  paste  cut text here     gt PRELOADED TEXT  This JavaScript should now add better support for IOS browsers and Android browsers  lt  textarea gt   lt textarea placeholder  Type  paste  cut text here     gt  lt  textarea gt  x000D   x000D   x000D   Test on jsfiddle  OPTION 3  jQuery Extension  Useful if you want to apply further chaining to the textareas you want to be auto-sized  jQuery fn extend     autoHeight  function          function autoHeight  element          return jQuery element           css    height    auto    overflow-y    hidden              height element scrollHeight             return this each function           autoHeight  this  on  input   function             autoHeight  this                              Invoke with    textarea   autoHeight    UPDATING TEXTAREA VIA JAVASCRIPT When injecting content into a textarea via JavaScript append the following code to invoke the function in option 1     textarea   trigger  input      PRESET TEXTAREA HEIGHT To fix the initial height of the textarea you will need to add an additional condition   x000D   x000D  const txHeight   16  const tx   document getElementsByTagName  textarea    for  let i   0  i  lt  tx length  i        if  tx i  value              tx i  setAttribute  style    height     txHeight    px overflow-y hidden         else       tx i  setAttribute  style    height      tx i  scrollHeight     px overflow-y hidden           tx i  addEventListener  input   OnInput  false      function OnInput e      this style height    auto     this style height    this scrollHeight     px     x000D   lt textarea placeholder  Type  paste  cut text here     gt PRELOADED TEXT  This JavaScript should now add better support for IOS browsers and Android browsers  lt  textarea gt   lt textarea placeholder  Type  paste  cut text here     gt  lt  textarea gt  x000D   x000D   x000D

User · Answer

The jQuery solution is to set the height of the textarea to  auto   check the scrollHeight and then adapt the height of the textarea to that  every time a textarea changes  JSFiddle       textarea   on   input   function          this  height   auto    height  this scrollHeight          If you re dynamically adding textareas  through AJAX or whatever   you can add this in your   document  ready to make sure all textareas with class  autoheight  are kept to the same height as their content     document  on   input    textarea autoheight   function           this  height   auto    height  this scrollHeight          Tested and working in Chrome  Firefox  Opera and IE  Also supports cut and paste  long words  etc

User · Answer

Native Javascript solution without flickering in Firefox and faster than method withclientHeight      1  Add div textarea selector to all your selectors containing textarea  Do not forget to add box-sizing  border-box    2  Include this script   function resizeAll        var textarea document querySelectorAll  textarea       for var i textarea length-1  i gt  0  i--        resize textarea i       function resize textarea       var div   document createElement  div       div setAttribute  class   textarea       div innerText textarea value   r n      div setAttribute  style   width   textarea offsetWidth  px display block height auto left 0px top 0px position fixed z-index -200 visibility hidden word-wrap break-word overflow hidden        textarea form appendChild div      var h div offsetHeight     div parentNode removeChild div      textarea style height h  px      function resizeOnInput e       var textarea document querySelectorAll  textarea       for var i textarea length-1  i gt  0  i--        textarea i  addEventListener  input  function e  resize e target   return false   false      window addEventListener  resize  function   resizeAll      false   window addEventListener  load  function   resizeAll      false   resizeOnInput      Tested on IE11  Firefox and Chrome   This solution creates div similar to your textarea including internal text and measures height

User · Answer

You re using the higher value of the current clientHeight and the content scrollHeight  When you make the scrollHeight smaller by removing content  the calculated area can t get smaller because the clientHeight  previously set by style height  is holding it open  You could instead take a max   of scrollHeight and a minimum height value you have predefined or calculated from textarea rows   In general you probably shouldn t really rely on scrollHeight on form controls  Apart from scrollHeight being traditionally less widely-supported than some of the other IE extensions  HTML CSS says nothing about how form controls are implemented internally and you aren t guaranteed scrollHeight will be anything meaningful   Traditionally some browsers have used OS widgets for the task  making CSS and DOM interaction on their internals impossible   At least sniff for scrollHeight clientHeight s existance before trying to enable the effect   Another possible alternative approach to avoid the issue if it s important that it work more widely might be to use a hidden div sized to the same width as the textarea  and set in the same font  On keyup  you copy the text from the textarea to a text node in hidden div  remembering to replace   n  with a line break  and escape   lt     amp   properly if you re using innerHTML   Then simply measuring the div s offsetHeight will give you the height you need

User · Answer

You re using the higher value of the current clientHeight and the content scrollHeight  When you make the scrollHeight smaller by removing content  the calculated area can t get smaller because the clientHeight  previously set by style height  is holding it open  You could instead take a max   of scrollHeight and a minimum height value you have predefined or calculated from textarea rows   In general you probably shouldn t really rely on scrollHeight on form controls  Apart from scrollHeight being traditionally less widely-supported than some of the other IE extensions  HTML CSS says nothing about how form controls are implemented internally and you aren t guaranteed scrollHeight will be anything meaningful   Traditionally some browsers have used OS widgets for the task  making CSS and DOM interaction on their internals impossible   At least sniff for scrollHeight clientHeight s existance before trying to enable the effect   Another possible alternative approach to avoid the issue if it s important that it work more widely might be to use a hidden div sized to the same width as the textarea  and set in the same font  On keyup  you copy the text from the textarea to a text node in hidden div  remembering to replace   n  with a line break  and escape   lt     amp   properly if you re using innerHTML   Then simply measuring the div s offsetHeight will give you the height you need

User · Answer

Just use  lt pre gt   lt  pre gt  with some styles like       pre           font-family  Arial  Helvetica  sans-serif          white-space  pre-wrap          word-wrap  break-word          font-size  12px          line-height  16px

User · Answer

I m able to set the TextArea size in IE9 and Chrome with the following jQuery function  It binds to the textarea objects from the selector defined in the   document  ready   function    function autoResize obj  size        obj keyup function              if    this  val   length  gt  size-1                  this  val  function                       this  height function                         return this scrollHeight   13                                      alert  The maximum comment length is   size   characters                     return   this  val   substring 0  size-1                                       this  height function                 if     this  val                            return 15                else                     this  height 15                   return    this  attr  scrollHeight  -2                                    keyup        In my   document  ready   function I have the following call for all of my textarea calls on this page      textarea   each  function             autoResize   this   250         Where 250 is the character limit on my text area  This will grow as large as the text size will allow  based on your character count and font size   It will also shrink your text area appropriately when you remove characters from your textarea or if the user pastes too much text initially

User · Answer

Some of the answers here don t account for padding   Assuming you have a maxHeight you don t want to go over  this worked for me          obviously requires jQuery         element is the textarea DOM node      var  el     element          inner height is height   padding        outerHeight includes border  and possibly margins too       var padding    el innerHeight   -  el height        var originalHeight    el height            XXX  Don t leave this hardcoded     var maxHeight   300       var adjust   function                reset it to the original height so that scrollHeight makes sense          el height originalHeight               this is the desired height  adjusted to content size          var height   element scrollHeight - padding              If you don t want a maxHeight  you can ignore this         height   Math min height  maxHeight               Set the height to the new adjusted height          el height height                 The input event only works on modern browsers     element addEventListener  input   adjust

User · Answer

Just use  lt pre gt   lt  pre gt  with some styles like       pre           font-family  Arial  Helvetica  sans-serif          white-space  pre-wrap          word-wrap  break-word          font-size  12px          line-height  16px

User · Answer

jQuery solution  adjust the css to match your requirements  css     div container textarea       min-width  270px      width  270px      height  22px      line-height  24px      min-height  22px      overflow-y  hidden     fixes scrollbar flash - kudos to  brettjonesdev        padding-top  1 1em     fixes text jump on Enter keypress        javascript        auto adjust the height of     container   delegate   textarea    keydown   function           this  height  0          this  height  this scrollHeight            container   find   textarea    keydown      OR alternative for jQuery 1 7         auto adjust the height of     container   on   keyup    textarea   function           this  height  0          this  height  this scrollHeight            container   find   textarea    keyup      I ve created a fiddle with the absolute minimum styling as a starting point for your experiments    http   jsfiddle net 53eAy 951

User · Answer

MakeTextAreaResisable that uses qQuery  function MakeTextAreaResisable id        var o     id       o css  overflow-y    hidden         function ResizeTextArea             o height  auto            o height o 0  scrollHeight              o on  change   function  e            ResizeTextArea                 o on  cut paste drop keydown   function  e            window setTimeout ResizeTextArea  0                o focus        o select        ResizeTextArea

User · Answer

I know a short and correct way of implementing this with jquery No extra hidden div needed and works in most browser   lt script type  text javascript  gt   function       textarea   live  keyup keydown  function    var h   this   h height 60  height h 0  scrollHeight    where 60 is minimum height of textarea          lt  script gt

User · Answer

I m able to set the TextArea size in IE9 and Chrome with the following jQuery function  It binds to the textarea objects from the selector defined in the   document  ready   function    function autoResize obj  size        obj keyup function              if    this  val   length  gt  size-1                  this  val  function                       this  height function                         return this scrollHeight   13                                      alert  The maximum comment length is   size   characters                     return   this  val   substring 0  size-1                                       this  height function                 if     this  val                            return 15                else                     this  height 15                   return    this  attr  scrollHeight  -2                                    keyup        In my   document  ready   function I have the following call for all of my textarea calls on this page      textarea   each  function             autoResize   this   250         Where 250 is the character limit on my text area  This will grow as large as the text size will allow  based on your character count and font size   It will also shrink your text area appropriately when you remove characters from your textarea or if the user pastes too much text initially

User · Answer

I created a small  7kb  custom element that deals with all of this resizing logic for you   It works everywhere  because it s implemented as a custom element  Including  Virtual DOMs  React  Elm  etc    server-side rendered stuff like PHP and plain boring HTML files   Apart from listening for the input event  it also has a timer that fires every 100ms to make sure things are still working in case the text content changes by some other means   Here s how it works      At the top of one of your Javascript files import  autoheight-textarea     or include as a script tag   lt script src    cdn jsdelivr net npm autoheight-textarea 1 0 1 dist main min js  gt  lt  script gt    then just wrap your textarea elements like so  HTML File   lt autoheight-textarea gt     lt textarea rows  4  placeholder  Type something  gt  lt  textarea gt   lt autoheight-textarea gt    React js Component  const MyComponent        gt      return        lt autoheight-textarea gt         lt textarea rows  4  placeholder  Type something       gt       lt  autoheight-textarea gt           Here s a basic demo on Codesandbox  https   codesandbox io s unruffled-http-2vm4c  And you can grab the package here  https   www npmjs com package autoheight-textarea  If you re just curious to see the resizing logic  you can take a look at this function  https   github com Ahrengot autoheight-textarea blob master src index ts L74-L85

User · Answer

For those who want the textarea to be auto resized on both width and height   HTML    lt textarea class  textbox  gt  lt  textarea gt   lt div gt     lt span class  tmp textbox  gt  lt  span gt   lt  div gt    CSS    textbox   tmp textbox     font-family   Arial     font-size  12px    resize  none    overflow hidden      tmp textbox     display  none      jQuery     function        alert     textbox   css  padding          textbox   on  keyup change   checkSize        textbox   trigger  keyup      function checkSize        var str     this  val   replace   r  n g    lt br  gt             tmp textbox   html  str       console log   this  val         var strArr   str split   lt br  gt        var row   strArr length         textbox   attr  rows   row          textbox   width      tmp textbox   width     parseInt     textbox   css  padding      2   10            Codepen   http   codepen io anon pen yNpvJJ  Cheers

User · Answer

Has anyone considered contenteditable  No messing around with scrolling a nd the only JS I like about it is if you plan on saving the data on blur    and apparently  it s compatible on all of the popular browsers   http   caniuse com  feat contenteditable Just style it to look like a text box  and it autosizes    Make its min-height the preferred text height and have at it  What s cool about this approach is that you can save  and  tags on some of the browsers  http   jsfiddle net gbutiri v31o8xfo   x000D   x000D  var  auto value         document  on  blur     autosave   function e      var  this     this     if   this text   trim                 this html                The text is here  Do whatever you want with it     this addClass  saving       if   auto value      this html       this hasClass  error              below code is for example only        ajax         url    echo json  action xyz abc         data   data      this html          type   post         datatype   json         success  function d            console log d            this removeClass  saving error   addClass  saved            var k   setTimeout function                this removeClass  saved error              500                  error  function              this removeClass  saving   addClass  error                        else        this removeClass  saving           on  focus mouseup     autosave   function       var  this     this     if   this text   trim                 this html             auto value    this html       on  keyup     autosave   function e      var  this     this     if   this text   trim                 this html              x000D  body     background   3A3E3F    font-family  Arial     label     font-size  11px    color   ddd      autoheight     min-height  16px    font-size  16px    margin  0    padding  10px    font-family  Arial    line-height  20px    box-sizing  border-box    -o-box-sizing  border-box    -moz-box-sizing  border-box    -webkit-box-sizing  border-box    overflow  hidden    display  block    resize  none    border  0    outline  none    min-width  200px    background   ddd    max-height  400px    overflow  auto      autoheight hover     background   eee      autoheight focus     background   fff      autosave     -webkit-transition  all  2s    -moz-transition  all  2s    transition  all  2s    position  relative    float  none      autoheight       margin  0    padding  0      autosave saving     background   ff9      autosave saved     background   9f9      autosave error     background   f99      autosave hover     background   eee      autosave focus     background   fff      contenteditable true  empty before     content  attr placeholder     color   999    position  relative    top  0px           For IE only  do this      position  absolute      top  10px           cursor  text    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt   lt label gt Your Name lt  label gt   lt div class  autoheight autosave contenteditable  contenteditable  true  placeholder  Your Name  gt  lt  div gt  x000D   x000D   x000D

User · Answer

I Don t know if anyone mention this way but in some cases it s possible to resize the height with rows Attribute  textarea setAttribute  rows  breaks     Demo

User · Answer

Accepted answer is working fine  But that is lot of code for this simple functionality  The below code will do the trick        document  on  keypress    textarea   function  e        var height     this  css  height        var iScrollHeight     this  prop  scrollHeight          this  css  height  iScrollHeight

User · Answer

Some of the answers here don t account for padding   Assuming you have a maxHeight you don t want to go over  this worked for me          obviously requires jQuery         element is the textarea DOM node      var  el     element          inner height is height   padding        outerHeight includes border  and possibly margins too       var padding    el innerHeight   -  el height        var originalHeight    el height            XXX  Don t leave this hardcoded     var maxHeight   300       var adjust   function                reset it to the original height so that scrollHeight makes sense          el height originalHeight               this is the desired height  adjusted to content size          var height   element scrollHeight - padding              If you don t want a maxHeight  you can ignore this         height   Math min height  maxHeight               Set the height to the new adjusted height          el height height                 The input event only works on modern browsers     element addEventListener  input   adjust

User · Answer

lt  DOCTYPE html gt   lt html gt   lt head gt       lt meta charset  UTF-8  gt       lt title gt Textarea autoresize lt  title gt       lt style gt      textarea           overflow  hidden             lt  style gt       lt script gt      function resizeTextarea ev            this style height    24px           this style height   this scrollHeight   12    px              var te   document querySelector  textarea        te addEventListener  input   resizeTextarea        lt  script gt   lt  head gt   lt body gt       lt textarea gt  lt  textarea gt   lt  body gt   lt  html gt    Tested in Firefox 14 and Chromium 18  The numbers 24 and 12 are arbitrary  test to see what suits you best   You could do without the style and script tags  but it becomes a bit messy imho  this is old style HTML JS and is not encouraged     lt textarea style  overflow  hidden  onkeyup  this style height  24px   this style height   this scrollHeight   12    px    gt  lt  textarea gt    Edit  modernized code  Changed onkeyup attribute to addEventListener  Edit  keydown works better than keyup Edit  declare function before using Edit  input works better than keydown  thnx  WASD42  amp   MA-Maddin   jsfiddle

User · Answer

lt  DOCTYPE html gt   lt html gt   lt head gt       lt meta charset  UTF-8  gt       lt title gt Textarea autoresize lt  title gt       lt style gt      textarea           overflow  hidden             lt  style gt       lt script gt      function resizeTextarea ev            this style height    24px           this style height   this scrollHeight   12    px              var te   document querySelector  textarea        te addEventListener  input   resizeTextarea        lt  script gt   lt  head gt   lt body gt       lt textarea gt  lt  textarea gt   lt  body gt   lt  html gt    Tested in Firefox 14 and Chromium 18  The numbers 24 and 12 are arbitrary  test to see what suits you best   You could do without the style and script tags  but it becomes a bit messy imho  this is old style HTML JS and is not encouraged     lt textarea style  overflow  hidden  onkeyup  this style height  24px   this style height   this scrollHeight   12    px    gt  lt  textarea gt    Edit  modernized code  Changed onkeyup attribute to addEventListener  Edit  keydown works better than keyup Edit  declare function before using Edit  input works better than keydown  thnx  WASD42  amp   MA-Maddin   jsfiddle

User · Answer

Here is what I did while using MVC HTML Helper for TextArea  I had quite a few of textarea elements so had to distinguish them using Model Id     Html TextAreaFor m   gt  m Text  2  1  new   id    text    Model Id  onkeyup    resizeTextBox     Model Id             and in script added this       function resizeTextBox ID                        var text   document getElementById  text    ID           text style height    auto           text style height   text scrollHeight    px                       I have tested it on IE10 and Firefox23

User · Answer

This works for me  Firefox 3 6 4 0 and Chrome 10 11     x000D   x000D  var observe  x000D  if  window attachEvent    x000D      observe   function  element  event  handler    x000D          element attachEvent  on  event  handler   x000D         x000D    x000D  else   x000D      observe   function  element  event  handler    x000D          element addEventListener event  handler  false   x000D         x000D    x000D  function init      x000D      var text   document getElementById  text    x000D      function resize      x000D          text style height    auto   x000D          text style height   text scrollHeight  px   x000D        x000D         0-timeout to get the already changed text    x000D      function delayedResize      x000D          window setTimeout resize  0   x000D        x000D      observe text   change    resize   x000D      observe text   cut       delayedResize   x000D      observe text   paste     delayedResize   x000D      observe text   drop      delayedResize   x000D      observe text   keydown   delayedResize   x000D   x000D      text focus    x000D      text select    x000D      resize    x000D    x000D  textarea   x000D      border  0 none white  x000D      overflow  hidden  x000D      padding  0  x000D      outline  none  x000D      background-color   D0D0D0  x000D    x000D   lt body onload  init     gt  x000D   lt textarea rows  1  style  height 1em   id  text  gt  lt  textarea gt  x000D   lt  body gt  x000D   x000D   x000D    If you want try it on jsfiddle It starts with a single line and grows only the exact amount necessary  It is ok for a single textarea  but I wanted to write something where I would have many many many such textareas  about as much as one would normally have lines in a large text document   In that case it is really slow   In Firefox it s insanely slow   So I really would like an approach that uses pure CSS  This would be possible with contenteditable  but I want it to be plaintext-only

User · Answer

Here is what I did while using MVC HTML Helper for TextArea  I had quite a few of textarea elements so had to distinguish them using Model Id     Html TextAreaFor m   gt  m Text  2  1  new   id    text    Model Id  onkeyup    resizeTextBox     Model Id             and in script added this       function resizeTextBox ID                        var text   document getElementById  text    ID           text style height    auto           text style height   text scrollHeight    px                       I have tested it on IE10 and Firefox23

User · Answer

If you don   t need to support IE8 you can use the input event   var resizingTextareas      slice call document querySelectorAll  textarea autoresize       resizingTextareas forEach function textarea      textarea addEventListener  input   autoresize  false        function autoresize       this style height    auto     this style height   this scrollHeight  px     this scrollTop   this scrollHeight    window scrollTo window scrollLeft  this scrollTop this scrollHeight        Now you only need to add some CSS and you are done   textarea autoresize      display  block    overflow  hidden    resize  none      Usage    lt textarea autoresize gt Type here and I   ll resize  lt  textarea gt    You can read more about how it works on my blog post

User · Answer

For those who want the textarea to be auto resized on both width and height   HTML    lt textarea class  textbox  gt  lt  textarea gt   lt div gt     lt span class  tmp textbox  gt  lt  span gt   lt  div gt    CSS    textbox   tmp textbox     font-family   Arial     font-size  12px    resize  none    overflow hidden      tmp textbox     display  none      jQuery     function        alert     textbox   css  padding          textbox   on  keyup change   checkSize        textbox   trigger  keyup      function checkSize        var str     this  val   replace   r  n g    lt br  gt             tmp textbox   html  str       console log   this  val         var strArr   str split   lt br  gt        var row   strArr length         textbox   attr  rows   row          textbox   width      tmp textbox   width     parseInt     textbox   css  padding      2   10            Codepen   http   codepen io anon pen yNpvJJ  Cheers

User · Answer

my implementation is very simple  count the number of lines in the input  and minimum 2 rows to show that it s a textarea    textarea rows   Math max 2  textarea value split   n   length       oninput   full working example with stimulus  https   jsbin com kajosolini 1 edit html js output   and this works with the browser s manual resize handle for instance

User · Answer

jQuery solution  adjust the css to match your requirements  css     div container textarea       min-width  270px      width  270px      height  22px      line-height  24px      min-height  22px      overflow-y  hidden     fixes scrollbar flash - kudos to  brettjonesdev        padding-top  1 1em     fixes text jump on Enter keypress        javascript        auto adjust the height of     container   delegate   textarea    keydown   function           this  height  0          this  height  this scrollHeight            container   find   textarea    keydown      OR alternative for jQuery 1 7         auto adjust the height of     container   on   keyup    textarea   function           this  height  0          this  height  this scrollHeight            container   find   textarea    keyup      I ve created a fiddle with the absolute minimum styling as a starting point for your experiments    http   jsfiddle net 53eAy 951

User · Answer

I know I m late to this party but the simplest solution I ve come across is to split your text area content on new line characters and update the rows for the textarea element   lt textarea id  quot my-text-area quot  gt  lt  textarea gt    lt script gt      function         const txtArea       my-text-area       const val   txtArea val       const rowLength   val split   n       txtArea attr  rows   rowLength        lt  script gt

User · Answer

The best solution  works and is short  for me is         document  on  input    textarea   function                this  outerHeight 38  outerHeight this scrollHeight      38 or  1em  -min-height            It works like a charm without any blinking with paste  with mouse also   cut  entering and it shrinks to the right size   Please take a look at jsFiddle

User · Answer

I have tested script in common browsers  and it failed in Chrome and Safari  It is because of constantly updatable scrollHeight variable    I have applied DisgruntledGoat script using jQuery and added chrome fix  function fitToContent    JQuery   text     Number   maxHeight        var adjustedHeight   text height        var relative error   parseInt text attr  relative error         if   maxHeight    maxHeight  gt  adjustedHeight            adjustedHeight   Math max text 0  scrollHeight  adjustedHeight           if  maxHeight              adjustedHeight   Math min maxHeight  adjustedHeight           if   adjustedHeight - relative error   gt  text height                  text css  height    adjustedHeight - relative error     px                   chrome fix             if  text 0  scrollHeight    adjustedHeight                    var relative   text 0  scrollHeight - adjustedHeight                  if  relative error    relative                        text attr  relative error   relative   relative error                                                      function autoResizeText    Number   maxHeight        var resize   function             fitToContent   this   maxHeight                 textarea   attr  relative error   0          textarea   each resize          textarea   keyup resize  keydown resize

User · Answer

This code works for pasting and select delete also     x000D   x000D  onKeyPressTextMessage   function    x000D     var textArea   event currentTarget  x000D       textArea style height    auto   x000D       textArea style height   textArea scrollHeight    px   x000D     x000D   lt textarea onkeyup  onKeyPressTextMessage event   name  welcomeContentTmpl  id  welcomeContent  onblur  onblurWelcomeTitle event   rows  2  cols  40  maxlength  320  gt  lt  textarea gt  x000D   x000D   x000D    Here is the JSFiddle

User · Answer

None of the answers seem to work  But this one works for me  https   coderwall com p imkqoq resize-textarea-to-fit-content      content   on   change keyup keydown paste cut    textarea   function           this  height 0  height this scrollHeight      find   textarea    change

User · Answer

You re using the higher value of the current clientHeight and the content scrollHeight  When you make the scrollHeight smaller by removing content  the calculated area can t get smaller because the clientHeight  previously set by style height  is holding it open  You could instead take a max   of scrollHeight and a minimum height value you have predefined or calculated from textarea rows   In general you probably shouldn t really rely on scrollHeight on form controls  Apart from scrollHeight being traditionally less widely-supported than some of the other IE extensions  HTML CSS says nothing about how form controls are implemented internally and you aren t guaranteed scrollHeight will be anything meaningful   Traditionally some browsers have used OS widgets for the task  making CSS and DOM interaction on their internals impossible   At least sniff for scrollHeight clientHeight s existance before trying to enable the effect   Another possible alternative approach to avoid the issue if it s important that it work more widely might be to use a hidden div sized to the same width as the textarea  and set in the same font  On keyup  you copy the text from the textarea to a text node in hidden div  remembering to replace   n  with a line break  and escape   lt     amp   properly if you re using innerHTML   Then simply measuring the div s offsetHeight will give you the height you need

User · Answer

textarea   bind  keyup change   function         var  this     this    offset   this offsetHeight       offset  gt   this height    amp  amp   offset  lt  300            this css  height     offset               attr  rows    this val   split   n   length               css   height     this attr  scrollHeight    overflow     hidden               this css  overflow   auto

User · Answer

As a different approach  you can use a  lt span gt  which adjusts its size automatically  You will need make it editable by adding the contenteditable  true  property and you re done    x000D   x000D  div   x000D    width  200px  x000D    x000D   x000D  span   x000D    border  1px solid  000  x000D    padding  5px  x000D    x000D   lt div gt  x000D     lt span contenteditable  true  gt This text can be edited by the user lt  span gt  x000D   lt  div gt  x000D   x000D   x000D    The only issue with this approach is that if you want to submit the value as part of the form  you ll have to do so by yourself in JavaScript  Doing so is relatively easy  For example  you can add a hidden field and in the onsubmit event of the form assign the value of the span to the hidden field which will be then automatically submitted with the form

User · Answer

If scrollHeight could be trusted  then   textarea onkeyup function       this style height       this rows this value split   n   length    this style height this scrollHeight  px

User · Answer

The jQuery solution is to set the height of the textarea to  auto   check the scrollHeight and then adapt the height of the textarea to that  every time a textarea changes  JSFiddle       textarea   on   input   function          this  height   auto    height  this scrollHeight          If you re dynamically adding textareas  through AJAX or whatever   you can add this in your   document  ready to make sure all textareas with class  autoheight  are kept to the same height as their content     document  on   input    textarea autoheight   function           this  height   auto    height  this scrollHeight          Tested and working in Chrome  Firefox  Opera and IE  Also supports cut and paste  long words  etc

User · Answer

You can use this code   Coffescript   jQuery fn extend autoHeightTextarea  - gt    autoHeightTextarea     element  - gt      jQuery element  css         height    auto         overflow-y    hidden   height element scrollHeight     each - gt      autoHeightTextarea     on  input   - gt        autoHeightTextarea        textarea class or id    autoHeightTextarea     Javascript  jQuery fn extend     autoHeightTextarea  function         var autoHeightTextarea       autoHeightTextarea    function element          return jQuery element  css            height    auto            overflow-y    hidden           height element scrollHeight              return this each function           return autoHeightTextarea  this  on  input   function             return autoHeightTextarea  this                                 textarea class or id    autoHeightTextarea

User · Answer

Accepted answer is working fine  But that is lot of code for this simple functionality  The below code will do the trick        document  on  keypress    textarea   function  e        var height     this  css  height        var iScrollHeight     this  prop  scrollHeight          this  css  height  iScrollHeight

User · Answer

You re using the higher value of the current clientHeight and the content scrollHeight  When you make the scrollHeight smaller by removing content  the calculated area can t get smaller because the clientHeight  previously set by style height  is holding it open  You could instead take a max   of scrollHeight and a minimum height value you have predefined or calculated from textarea rows   In general you probably shouldn t really rely on scrollHeight on form controls  Apart from scrollHeight being traditionally less widely-supported than some of the other IE extensions  HTML CSS says nothing about how form controls are implemented internally and you aren t guaranteed scrollHeight will be anything meaningful   Traditionally some browsers have used OS widgets for the task  making CSS and DOM interaction on their internals impossible   At least sniff for scrollHeight clientHeight s existance before trying to enable the effect   Another possible alternative approach to avoid the issue if it s important that it work more widely might be to use a hidden div sized to the same width as the textarea  and set in the same font  On keyup  you copy the text from the textarea to a text node in hidden div  remembering to replace   n  with a line break  and escape   lt     amp   properly if you re using innerHTML   Then simply measuring the div s offsetHeight will give you the height you need

User · Answer

None of the answers seem to work  But this one works for me  https   coderwall com p imkqoq resize-textarea-to-fit-content      content   on   change keyup keydown paste cut    textarea   function           this  height 0  height this scrollHeight      find   textarea    change

User · Answer

As a different approach  you can use a  lt span gt  which adjusts its size automatically  You will need make it editable by adding the contenteditable  true  property and you re done    x000D   x000D  div   x000D    width  200px  x000D    x000D   x000D  span   x000D    border  1px solid  000  x000D    padding  5px  x000D    x000D   lt div gt  x000D     lt span contenteditable  true  gt This text can be edited by the user lt  span gt  x000D   lt  div gt  x000D   x000D   x000D    The only issue with this approach is that if you want to submit the value as part of the form  you ll have to do so by yourself in JavaScript  Doing so is relatively easy  For example  you can add a hidden field and in the onsubmit event of the form assign the value of the span to the hidden field which will be then automatically submitted with the form

User · Answer

A bit corrections  Works perfectly in Opera       textarea   bind  keyup keypress   function             this  height            var brCount   this value split   n   length        this rows   brCount 1       To remove twitching       var areaH   this scrollHeight            lineHeight     this  css  line-height   replace  px                 calcRows   Math floor areaH lineHeight         this rows   calcRows

User · Answer

The Best way I found      textarea auto-grow   each  function          this  keyup function              this  height    this  0  scrollHeight - Number    this  css  font-size   replace  px                          Other ways has a font-size bug   Thats why this is the best

User · Answer

autosize  https   github com jackmoore autosize  Just works  standalone  is popular  3 0k  GitHub stars as of October 2018   available on cdnjs  and lightweight   3 5k   Demo    x000D   x000D   lt textarea id  autosize  style  width 200px   gt a x000D  J   b x000D  c lt  textarea gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs autosize js 4 0 2 autosize min js  gt  lt  script gt  x000D   lt script gt autosize document querySelectorAll   autosize     lt  script gt  x000D   x000D   x000D    BTW  if you are using the ACE editor  use maxLines  Infinity  Automatically adjust height to contents in Ace Cloud 9 editor

User · Answer

I recommend the javascript library from http   javierjulio github io textarea-autosize   Per comments  add example codeblock on plugin usage    lt textarea class  js-auto-size  rows  1  gt  lt  textarea gt    lt script src  http   code jquery com jquery-2 1 0 min js  gt  lt  script gt   lt script src  jquery textarea autosize min js  gt  lt  script gt   lt script gt     textarea js-auto-size   textareaAutoSize     lt  script gt    Minimum required CSS   textarea     box-sizing  border-box    max-height  160px     optional but recommended   min-height  38px    overflow-x  hidden     for Firefox  issue  5

User · Answer

If scrollHeight could be trusted  then   textarea onkeyup function       this style height       this rows this value split   n   length    this style height this scrollHeight  px

User · Answer

I created a small  7kb  custom element that deals with all of this resizing logic for you   It works everywhere  because it s implemented as a custom element  Including  Virtual DOMs  React  Elm  etc    server-side rendered stuff like PHP and plain boring HTML files   Apart from listening for the input event  it also has a timer that fires every 100ms to make sure things are still working in case the text content changes by some other means   Here s how it works      At the top of one of your Javascript files import  autoheight-textarea     or include as a script tag   lt script src    cdn jsdelivr net npm autoheight-textarea 1 0 1 dist main min js  gt  lt  script gt    then just wrap your textarea elements like so  HTML File   lt autoheight-textarea gt     lt textarea rows  4  placeholder  Type something  gt  lt  textarea gt   lt autoheight-textarea gt    React js Component  const MyComponent        gt      return        lt autoheight-textarea gt         lt textarea rows  4  placeholder  Type something       gt       lt  autoheight-textarea gt           Here s a basic demo on Codesandbox  https   codesandbox io s unruffled-http-2vm4c  And you can grab the package here  https   www npmjs com package autoheight-textarea  If you re just curious to see the resizing logic  you can take a look at this function  https   github com Ahrengot autoheight-textarea blob master src index ts L74-L85

User · Answer

Here is an angularjs directive for panzi s answer    module directive  autoHeight   function             return               restrict   A               link  function scope  element  attrs                    element   element 0                   var resize   function                        element style height    auto                       element style height    element scrollHeight   px                                      element addEventListener  change   resize  false                   element addEventListener  cut      resize  false                   element addEventListener  paste    resize  false                   element addEventListener  drop     resize  false                   element addEventListener  keydown  resize  false                    setTimeout resize  100                                      HTML    lt textarea ng-model  foo  auto-height gt  lt  textarea gt

User · Answer

I Don t know if anyone mention this way but in some cases it s possible to resize the height with rows Attribute  textarea setAttribute  rows  breaks     Demo

User · Answer

The best solution  works and is short  for me is         document  on  input    textarea   function                this  outerHeight 38  outerHeight this scrollHeight      38 or  1em  -min-height            It works like a charm without any blinking with paste  with mouse also   cut  entering and it shrinks to the right size   Please take a look at jsFiddle

User · Answer

You can use this piece of code to compute the number of rows a textarea needs:

textarea.rows = 1;
    if (textarea.scrollHeight > textarea.clientHeight)
      textarea.rows = textarea.scrollHeight / textarea.clientHeight;

Compute it on input and window:resize events to get auto-resize effect. Example in Angular:

Template code:

<textarea rows="1" reAutoWrap></textarea>

auto-wrap.directive.ts

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: 'textarea[reAutoWrap]',
})
export class AutoWrapDirective {

  private readonly textarea: HTMLTextAreaElement;

  constructor(el: ElementRef) {
    this.textarea = el.nativeElement;
  }

  @HostListener('input') onInput() {
    this.resize();
  }

  @HostListener('window:resize') onChange() {
    this.resize();
  }

  private resize() {
    this.textarea.rows = 1;
    if (this.textarea.scrollHeight > this.textarea.clientHeight)
      this.textarea.rows = this.textarea.scrollHeight / this.textarea.clientHeight;
  }

}

User · Answer

Found an one liner from here    lt textarea name  text  oninput  this style height       this style height   this scrollHeight   px   gt  lt  textarea gt

User · Answer

I have tested script in common browsers  and it failed in Chrome and Safari  It is because of constantly updatable scrollHeight variable    I have applied DisgruntledGoat script using jQuery and added chrome fix  function fitToContent    JQuery   text     Number   maxHeight        var adjustedHeight   text height        var relative error   parseInt text attr  relative error         if   maxHeight    maxHeight  gt  adjustedHeight            adjustedHeight   Math max text 0  scrollHeight  adjustedHeight           if  maxHeight              adjustedHeight   Math min maxHeight  adjustedHeight           if   adjustedHeight - relative error   gt  text height                  text css  height    adjustedHeight - relative error     px                   chrome fix             if  text 0  scrollHeight    adjustedHeight                    var relative   text 0  scrollHeight - adjustedHeight                  if  relative error    relative                        text attr  relative error   relative   relative error                                                      function autoResizeText    Number   maxHeight        var resize   function             fitToContent   this   maxHeight                 textarea   attr  relative error   0          textarea   each resize          textarea   keyup resize  keydown resize

User · Answer

MakeTextAreaResisable that uses qQuery  function MakeTextAreaResisable id        var o     id       o css  overflow-y    hidden         function ResizeTextArea             o height  auto            o height o 0  scrollHeight              o on  change   function  e            ResizeTextArea                 o on  cut paste drop keydown   function  e            window setTimeout ResizeTextArea  0                o focus        o select        ResizeTextArea

User · Answer

Those who want to achieve the same in new versions of Angular   Grab textArea elementRef    ViewChild  textArea     read  ElementRef    textArea  ElementRef   public autoShrinkGrow         textArea style overflow    hidden       textArea style height    0px       textArea style height   textArea scrollHeight    px       lt textarea  keyup   autoGrow     textArea gt  lt  textarea gt    I am also adding another use case that may come handy some users reading the thread  when user want to increase the height of text-area to certain height and then have overflow scroll on it  above method can be extended to achieve the mentioned use-case     public autoGrowShrinkToCertainHeight         const textArea   this textArea nativeElement      if  textArea scrollHeight  gt  77          textArea style overflow    auto         return            else         textArea style overflow    hidden         textArea style height    0px         textArea style height   textArea scrollHeight    px

User · Answer

Here is an angularjs directive for panzi s answer    module directive  autoHeight   function             return               restrict   A               link  function scope  element  attrs                    element   element 0                   var resize   function                        element style height    auto                       element style height    element scrollHeight   px                                      element addEventListener  change   resize  false                   element addEventListener  cut      resize  false                   element addEventListener  paste    resize  false                   element addEventListener  drop     resize  false                   element addEventListener  keydown  resize  false                    setTimeout resize  100                                      HTML    lt textarea ng-model  foo  auto-height gt  lt  textarea gt

User · Answer

Has anyone considered contenteditable  No messing around with scrolling a nd the only JS I like about it is if you plan on saving the data on blur    and apparently  it s compatible on all of the popular browsers   http   caniuse com  feat contenteditable Just style it to look like a text box  and it autosizes    Make its min-height the preferred text height and have at it  What s cool about this approach is that you can save  and  tags on some of the browsers  http   jsfiddle net gbutiri v31o8xfo   x000D   x000D  var  auto value         document  on  blur     autosave   function e      var  this     this     if   this text   trim                 this html                The text is here  Do whatever you want with it     this addClass  saving       if   auto value      this html       this hasClass  error              below code is for example only        ajax         url    echo json  action xyz abc         data   data      this html          type   post         datatype   json         success  function d            console log d            this removeClass  saving error   addClass  saved            var k   setTimeout function                this removeClass  saved error              500                  error  function              this removeClass  saving   addClass  error                        else        this removeClass  saving           on  focus mouseup     autosave   function       var  this     this     if   this text   trim                 this html             auto value    this html       on  keyup     autosave   function e      var  this     this     if   this text   trim                 this html              x000D  body     background   3A3E3F    font-family  Arial     label     font-size  11px    color   ddd      autoheight     min-height  16px    font-size  16px    margin  0    padding  10px    font-family  Arial    line-height  20px    box-sizing  border-box    -o-box-sizing  border-box    -moz-box-sizing  border-box    -webkit-box-sizing  border-box    overflow  hidden    display  block    resize  none    border  0    outline  none    min-width  200px    background   ddd    max-height  400px    overflow  auto      autoheight hover     background   eee      autoheight focus     background   fff      autosave     -webkit-transition  all  2s    -moz-transition  all  2s    transition  all  2s    position  relative    float  none      autoheight       margin  0    padding  0      autosave saving     background   ff9      autosave saved     background   9f9      autosave error     background   f99      autosave hover     background   eee      autosave focus     background   fff      contenteditable true  empty before     content  attr placeholder     color   999    position  relative    top  0px           For IE only  do this      position  absolute      top  10px           cursor  text    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt   lt label gt Your Name lt  label gt   lt div class  autoheight autosave contenteditable  contenteditable  true  placeholder  Your Name  gt  lt  div gt  x000D   x000D   x000D

User · Answer

autosize  https   github com jackmoore autosize  Just works  standalone  is popular  3 0k  GitHub stars as of October 2018   available on cdnjs  and lightweight   3 5k   Demo    x000D   x000D   lt textarea id  autosize  style  width 200px   gt a x000D  J   b x000D  c lt  textarea gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs autosize js 4 0 2 autosize min js  gt  lt  script gt  x000D   lt script gt autosize document querySelectorAll   autosize     lt  script gt  x000D   x000D   x000D    BTW  if you are using the ACE editor  use maxLines  Infinity  Automatically adjust height to contents in Ace Cloud 9 editor

User · Answer

The following works for cutting  pasting  etc   regardless of whether those actions are from the mouse  a keyboard shortcut  selecting an option from a menu bar     several answers take a similar approach but they don t account for box-sizing  which is why they incorrectly apply the style overflow  hidden   I do the following  which also works well with max-height and rows for minimum and maximum height    x000D   x000D  function adjust     x000D    var style   this currentStyle    window getComputedStyle this   x000D    var boxSizing   style boxSizing      border-box  x000D          parseInt style borderBottomWidth  10    x000D          parseInt style borderTopWidth  10  x000D          0  x000D    this style height       x000D    this style height    this scrollHeight   boxSizing     px   x000D     x000D   x000D  var textarea   document getElementById  ta    x000D  if   onpropertychange  in textarea       IE x000D    textarea onpropertychange   adjust  x000D    else if   oninput  in textarea    x000D    textarea oninput   adjust  x000D    x000D  setTimeout adjust bind textarea    x000D  textarea   x000D    resize  none  x000D    max-height  150px  x000D    border  1px solid  999  x000D    outline  none  x000D    font  18px sans-serif  x000D    color   333  x000D    width  100   x000D    padding  8px 14px  x000D    box-sizing  border-box  x000D    x000D   lt textarea rows  3  id  ta  gt  x000D  Try adding several lines to this  x000D   lt  textarea gt  x000D   x000D   x000D    For absolute completeness  you should call the adjust function in a few more circumstances    Window resize events  if the width of the textarea changes with window resizing  or other events that change the width of the textarea When the textarea s display style attribute changes  e g  when it goes from none  hidden  to block When the value of the textarea is changed programmatically   Note that using window getComputedStyle or getting currentStyle can be somewhat computationally expensive  so you may want to cache the result instead   Works for IE6  so I really hope that s good enough support

User · Answer

I know I m late to this party but the simplest solution I ve come across is to split your text area content on new line characters and update the rows for the textarea element   lt textarea id  quot my-text-area quot  gt  lt  textarea gt    lt script gt      function         const txtArea       my-text-area       const val   txtArea val       const rowLength   val split   n       txtArea attr  rows   rowLength        lt  script gt

User · Answer

A COMPLETE YET SIMPLE SOLUTION Updated 2020-05-14  Improved browser support for mobiles and tablets  The following code will work   On key input  With pasted text  right click  amp  ctrl v   With cut text  right click  amp  ctrl x   With pre-loaded text  With all textarea s  multiline textbox s  site wide  With Firefox  v31-67 tested   With Chrome  v37-74 tested   With IE  v9-v11 tested   With Edge  v14-v18 tested   With IOS Safari  With Android Browser  With JavaScript strict mode  Is w3c validated  And is streamlined and efficient    OPTION 1  With jQuery  This option requires jQuery and has been tested and is working with 1 7 2 - 3 3 1 Simple  Add this jquery code to your master script file and forget about it    x000D   x000D     textarea   each function        this setAttribute  style    height      this scrollHeight     px overflow-y hidden        on  input   function        this style height    auto     this style height    this scrollHeight     px       x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt   lt textarea placeholder  Type  paste  cut text here     gt PRELOADED TEXT  This javascript should now add better support for IOS browsers and Android browsers  lt  textarea gt   lt textarea placeholder  Type  paste  cut text here     gt  lt  textarea gt  x000D   x000D   x000D   Test on jsfiddle  OPTION 2  Pure JavaScript  Simple  Add this JavaScript to your master script file and forget about it    x000D   x000D  const tx   document getElementsByTagName  textarea    for  let i   0  i  lt  tx length  i        tx i  setAttribute  style    height      tx i  scrollHeight     px overflow-y hidden       tx i  addEventListener  input   OnInput  false      function OnInput       this style height    auto     this style height    this scrollHeight     px     x000D   lt textarea placeholder  Type  paste  cut text here     gt PRELOADED TEXT  This JavaScript should now add better support for IOS browsers and Android browsers  lt  textarea gt   lt textarea placeholder  Type  paste  cut text here     gt  lt  textarea gt  x000D   x000D   x000D   Test on jsfiddle  OPTION 3  jQuery Extension  Useful if you want to apply further chaining to the textareas you want to be auto-sized  jQuery fn extend     autoHeight  function          function autoHeight  element          return jQuery element           css    height    auto    overflow-y    hidden              height element scrollHeight             return this each function           autoHeight  this  on  input   function             autoHeight  this                              Invoke with    textarea   autoHeight    UPDATING TEXTAREA VIA JAVASCRIPT When injecting content into a textarea via JavaScript append the following code to invoke the function in option 1     textarea   trigger  input      PRESET TEXTAREA HEIGHT To fix the initial height of the textarea you will need to add an additional condition   x000D   x000D  const txHeight   16  const tx   document getElementsByTagName  textarea    for  let i   0  i  lt  tx length  i        if  tx i  value              tx i  setAttribute  style    height     txHeight    px overflow-y hidden         else       tx i  setAttribute  style    height      tx i  scrollHeight     px overflow-y hidden           tx i  addEventListener  input   OnInput  false      function OnInput e      this style height    auto     this style height    this scrollHeight     px     x000D   lt textarea placeholder  Type  paste  cut text here     gt PRELOADED TEXT  This JavaScript should now add better support for IOS browsers and Android browsers  lt  textarea gt   lt textarea placeholder  Type  paste  cut text here     gt  lt  textarea gt  x000D   x000D   x000D

User · Answer

This is a jQuery version of Moussawi7 s answer   x000D   x000D    function          textarea auto-grow   on  input   function         var element     this  0       element style height    5px       element style height    element scrollHeight     px            x000D  textarea     resize  none    overflow  auto    width  100     min-height  50px    max-height  150px    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt   lt textarea class  auto-grow  gt  lt  textarea gt  x000D   x000D   x000D

User · Answer

This code works for pasting and select delete also     x000D   x000D  onKeyPressTextMessage   function    x000D     var textArea   event currentTarget  x000D       textArea style height    auto   x000D       textArea style height   textArea scrollHeight    px   x000D     x000D   lt textarea onkeyup  onKeyPressTextMessage event   name  welcomeContentTmpl  id  welcomeContent  onblur  onblurWelcomeTitle event   rows  2  cols  40  maxlength  320  gt  lt  textarea gt  x000D   x000D   x000D    Here is the JSFiddle

User · Answer

my implementation is very simple  count the number of lines in the input  and minimum 2 rows to show that it s a textarea    textarea rows   Math max 2  textarea value split   n   length       oninput   full working example with stimulus  https   jsbin com kajosolini 1 edit html js output   and this works with the browser s manual resize handle for instance

User · Answer

An even simpler  cleaner approach is this       adjust height of textarea auto-height   document  on   keyup    textarea auto-height   function  e         this  css  height    auto        you can have this here or declared in CSS instead       this  height  this scrollHeight       keyup         and the CSS  textarea auto-height       resize  vertical      max-height  600px     set as you need it        height  auto          can be set here of in JS        overflow-y  auto      word-wrap break-word     All that is needed is to add the  auto-height class to any textarea you want to target   Tested in FF  Chrome and Safari  Let me know if this doesn t work for you  for any reason  But  this is the cleanest and simplest way I ve found this to work  And it works great   D

User · Answer

The Best way I found      textarea auto-grow   each  function          this  keyup function              this  height    this  0  scrollHeight - Number    this  css  font-size   replace  px                          Other ways has a font-size bug   Thats why this is the best

User · Answer

The following works for cutting  pasting  etc   regardless of whether those actions are from the mouse  a keyboard shortcut  selecting an option from a menu bar     several answers take a similar approach but they don t account for box-sizing  which is why they incorrectly apply the style overflow  hidden   I do the following  which also works well with max-height and rows for minimum and maximum height    x000D   x000D  function adjust     x000D    var style   this currentStyle    window getComputedStyle this   x000D    var boxSizing   style boxSizing      border-box  x000D          parseInt style borderBottomWidth  10    x000D          parseInt style borderTopWidth  10  x000D          0  x000D    this style height       x000D    this style height    this scrollHeight   boxSizing     px   x000D     x000D   x000D  var textarea   document getElementById  ta    x000D  if   onpropertychange  in textarea       IE x000D    textarea onpropertychange   adjust  x000D    else if   oninput  in textarea    x000D    textarea oninput   adjust  x000D    x000D  setTimeout adjust bind textarea    x000D  textarea   x000D    resize  none  x000D    max-height  150px  x000D    border  1px solid  999  x000D    outline  none  x000D    font  18px sans-serif  x000D    color   333  x000D    width  100   x000D    padding  8px 14px  x000D    box-sizing  border-box  x000D    x000D   lt textarea rows  3  id  ta  gt  x000D  Try adding several lines to this  x000D   lt  textarea gt  x000D   x000D   x000D    For absolute completeness  you should call the adjust function in a few more circumstances    Window resize events  if the width of the textarea changes with window resizing  or other events that change the width of the textarea When the textarea s display style attribute changes  e g  when it goes from none  hidden  to block When the value of the textarea is changed programmatically   Note that using window getComputedStyle or getting currentStyle can be somewhat computationally expensive  so you may want to cache the result instead   Works for IE6  so I really hope that s good enough support

User · Answer

for Angular 2   just do this  lt textarea  keydown   quot resize  event  quot  gt  lt  textarea gt    resize e        setTimeout      gt          e target style height    auto         e target style height    e target scrollHeight   px          0        textarea     resize  none    overflow  hidden

User · Answer

There is a slightly different approach    lt div style  position  relative  gt     lt pre style  white-space  pre-wrap  word-wrap  break-word  gt  lt  pre gt     lt textarea style  position  absolute  top  0  left  0  width  100   height  100   gt  lt  textarea gt   lt  div gt    The idea is to copy the text from textarea into the pre and let CSS make sure that they have the same size   The benefit is that frameworks present simple tools to move text around without touching any events  Namely  in AngularJS you would add a ng-model  foo  ng-trim  false  to the textarea and ng-bind  foo     n   to the pre  See a fiddle   Just make sure that pre has the same font size as the textarea

User · Answer

Found an one liner from here    lt textarea name  text  oninput  this style height       this style height   this scrollHeight   px   gt  lt  textarea gt

User · Answer

for Angular 2   just do this  lt textarea  keydown   quot resize  event  quot  gt  lt  textarea gt    resize e        setTimeout      gt          e target style height    auto         e target style height    e target scrollHeight   px          0        textarea     resize  none    overflow  hidden

User · Answer

If you don   t need to support IE8 you can use the input event   var resizingTextareas      slice call document querySelectorAll  textarea autoresize       resizingTextareas forEach function textarea      textarea addEventListener  input   autoresize  false        function autoresize       this style height    auto     this style height   this scrollHeight  px     this scrollTop   this scrollHeight    window scrollTo window scrollLeft  this scrollTop this scrollHeight        Now you only need to add some CSS and you are done   textarea autoresize      display  block    overflow  hidden    resize  none      Usage    lt textarea autoresize gt Type here and I   ll resize  lt  textarea gt    You can read more about how it works on my blog post

User · Answer

A bit corrections  Works perfectly in Opera       textarea   bind  keyup keypress   function             this  height            var brCount   this value split   n   length        this rows   brCount 1       To remove twitching       var areaH   this scrollHeight            lineHeight     this  css  line-height   replace  px                 calcRows   Math floor areaH lineHeight         this rows   calcRows

User · Answer

I know a short and correct way of implementing this with jquery No extra hidden div needed and works in most browser   lt script type  text javascript  gt   function       textarea   live  keyup keydown  function    var h   this   h height 60  height h 0  scrollHeight    where 60 is minimum height of textarea          lt  script gt

User · Answer

You can use JQuery to expand the textarea while typing    x000D   x000D    document  find  textarea   each function      x000D    var offset   this offsetHeight - this clientHeight  x000D   x000D      this  on  keyup input focus   function      x000D        this  css  height    auto   css  height   this scrollHeight   offset   x000D        x000D      x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   x000D   lt div gt  x000D   lt textarea name  note  gt  lt  textarea gt  x000D   lt div gt  x000D   x000D   x000D

User · Answer

You can use this code   Coffescript   jQuery fn extend autoHeightTextarea  - gt    autoHeightTextarea     element  - gt      jQuery element  css         height    auto         overflow-y    hidden   height element scrollHeight     each - gt      autoHeightTextarea     on  input   - gt        autoHeightTextarea        textarea class or id    autoHeightTextarea     Javascript  jQuery fn extend     autoHeightTextarea  function         var autoHeightTextarea       autoHeightTextarea    function element          return jQuery element  css            height    auto            overflow-y    hidden           height element scrollHeight              return this each function           return autoHeightTextarea  this  on  input   function             return autoHeightTextarea  this                                 textarea class or id    autoHeightTextarea

User · Answer

Those who want to achieve the same in new versions of Angular   Grab textArea elementRef    ViewChild  textArea     read  ElementRef    textArea  ElementRef   public autoShrinkGrow         textArea style overflow    hidden       textArea style height    0px       textArea style height   textArea scrollHeight    px       lt textarea  keyup   autoGrow     textArea gt  lt  textarea gt    I am also adding another use case that may come handy some users reading the thread  when user want to increase the height of text-area to certain height and then have overflow scroll on it  above method can be extended to achieve the mentioned use-case     public autoGrowShrinkToCertainHeight         const textArea   this textArea nativeElement      if  textArea scrollHeight  gt  77          textArea style overflow    auto         return            else         textArea style overflow    hidden         textArea style height    0px         textArea style height   textArea scrollHeight    px

User · Answer

I used the following code for multiple textareas  Working fine in Chrome 12  Firefox 5 and IE 9  even with delete  cut and paste actions performed in the textareas   x000D   x000D  function attachAutoResizeEvents       for  i   1  i  lt   4  i          var txtX   document getElementById  txt    i      var minH   txtX style height substr 0  txtX style height indexOf  px        txtX onchange   new Function  resize this     minH            txtX onkeyup   new Function  resize this     minH            txtX onchange txtX  minH         function resize txtX  minH      txtX style height    auto     required when delete  cut or paste is performed   txtX style height   txtX scrollHeight    px    if  txtX scrollHeight  lt   minH      txtX style height   minH    px    window onload   attachAutoResizeEvents x000D  textarea     border  0 none    overflow  hidden    outline  none    background-color   eee   x000D   lt textarea style  height 100px font-family arial  id  txt1  gt  lt  textarea gt   lt textarea style  height 125px font-family arial  id  txt2  gt  lt  textarea gt   lt textarea style  height 150px font-family arial  id  txt3  gt  lt  textarea gt   lt textarea style  height 175px font-family arial  id  txt4  gt  lt  textarea gt  x000D   x000D   x000D

User · Answer

textarea   bind  keyup change   function         var  this     this    offset   this offsetHeight       offset  gt   this height    amp  amp   offset  lt  300            this css  height     offset               attr  rows    this val   split   n   length               css   height     this attr  scrollHeight    overflow     hidden               this css  overflow   auto

User · Answer

An even simpler  cleaner approach is this       adjust height of textarea auto-height   document  on   keyup    textarea auto-height   function  e         this  css  height    auto        you can have this here or declared in CSS instead       this  height  this scrollHeight       keyup         and the CSS  textarea auto-height       resize  vertical      max-height  600px     set as you need it        height  auto          can be set here of in JS        overflow-y  auto      word-wrap break-word     All that is needed is to add the  auto-height class to any textarea you want to target   Tested in FF  Chrome and Safari  Let me know if this doesn t work for you  for any reason  But  this is the cleanest and simplest way I ve found this to work  And it works great   D

User · Answer

You can use JQuery to expand the textarea while typing    x000D   x000D    document  find  textarea   each function      x000D    var offset   this offsetHeight - this clientHeight  x000D   x000D      this  on  keyup input focus   function      x000D        this  css  height    auto   css  height   this scrollHeight   offset   x000D        x000D      x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   x000D   lt div gt  x000D   lt textarea name  note  gt  lt  textarea gt  x000D   lt div gt  x000D   x000D   x000D

[javascript] Creating a textarea with auto-resize

Examples related to javascript

Examples related to html

Examples related to resize

Examples related to height

Examples related to textarea