Textarea Auto height

Question

I want to make height of textarea equal to height of the text within it  And remove the scroll bar   HTML   lt textarea id  note  gt SOME TEXT lt  textarea gt    CSS  textarea note       width 100       direction rtl      display block      max-width 100       line-height 1 5      padding 15px 15px 30px      border-radius 3px      border 1px solid  F7E98D      font 13px Tahoma  cursive      transition box-shadow 0 5s ease      box-shadow 0 4px 6px rgba 0 0 0 0 1       font-smoothing subpixel-antialiased      background linear-gradient  F9EFAF   F7E98D       background -o-linear-gradient  F9EFAF   F7E98D       background -ms-linear-gradient  F9EFAF   F7E98D       background -moz-linear-gradient  F9EFAF   F7E98D       background -webkit-linear-gradient  F9EFAF   F7E98D       JsFiddle  http   jsfiddle net Tw9Rj

User · Answer

I used jQuery AutoSize   When I tried using Elastic it frequently gave me bogus heights  really tall textarea s    jQuery AutoSize has worked well and hasn t had this issue

User · Answer

This using Pure JavaScript Code    x000D   x000D  function auto grow element    x000D      element style height    5px   x000D      element style height    element scrollHeight   px   x000D    x000D  textarea   x000D      resize  none  x000D      overflow  hidden  x000D      min-height  50px  x000D      max-height  100px  x000D    x000D   lt textarea oninput  auto grow this   gt  lt  textarea gt  x000D   x000D   x000D

User · Answer

It can be achieved using JS  Here is a  one-line  solution using elastic js       note   elastic        Updated  Seems like elastic js is not there anymore  but if you are looking for an external library  I can recommend autosize js by Jack Moore  This is the working example    x000D   x000D  autosize document getElementById  note     x000D  textarea note   x000D   width 100   x000D   box-sizing border-box  x000D   direction rtl  x000D   display block  x000D   max-width 100   x000D   line-height 1 5  x000D   padding 15px 15px 30px  x000D   border-radius 3px  x000D   border 1px solid  F7E98D  x000D   font 13px Tahoma  cursive  x000D   transition box-shadow 0 5s ease  x000D   box-shadow 0 4px 6px rgba 0 0 0 0 1   x000D   font-smoothing subpixel-antialiased  x000D   background linear-gradient  F9EFAF   F7E98D   x000D   background -o-linear-gradient  F9EFAF   F7E98D   x000D   background -ms-linear-gradient  F9EFAF   F7E98D   x000D   background -moz-linear-gradient  F9EFAF   F7E98D   x000D   background -webkit-linear-gradient  F9EFAF   F7E98D   x000D    x000D   lt script src  https   rawgit com jackmoore autosize master dist autosize min js  gt  lt  script gt  x000D   lt textarea id  note  gt Lorem ipsum dolor sit amet  consectetuer adipiscing elit  sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat  Ut wisi enim ad minim veniam  quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat  Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat  vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi  lt  textarea gt  x000D   x000D   x000D    Check this similar topics too   Autosizing textarea using Prototype  Textarea to resize based on content length  Creating a textarea with auto-resize

User · Answer

I see that this is answered already  but I believe I have a simple jQuery solution   jQuery is not even really needed  I just enjoy using it     I suggest counting the line breaks in the textarea text and setting the rows attribute of the textarea accordingly   var text   jQuery   your textarea   val           look for any   n  occurences     matches   text match   n g       breaks   matches   matches length   2   jQuery   your textarea   attr  rows  breaks   2

User · Answer

html   lt textarea id  wmd-input  name  md-content  gt  lt  textarea gt    js  var textarea       wmd-input        top   textarea scrollTop        height   textarea height        if top  gt  0          textarea css  height  top   height          css   wmd-input      width  100       overflow  hidden      padding  10px

User · Answer

var minRows   5  var maxRows   26  function ResizeTextarea id        var t   document getElementById id       if  t scrollTop    0    t scrollTop 1      while  t scrollTop    0            if  t rows  gt  minRows                  t rows--  else             break          t scrollTop   1          if  t rows  lt  maxRows                  t style overflowY    hidden           if  t scrollTop  gt  0                t rows                break                      while t scrollTop  gt  0            if  t rows  lt  maxRows                t rows                if  t scrollTop    0  t scrollTop 1            else               t style overflowY    auto               break

User · Answer

Jsfiddle  textarea note       width 100       direction rtl      display block      max-width 100       line-height 1 5      padding 15px 15px 30px      border-radius 3px      border 1px solid  F7E98D      font 13px Tahoma  cursive      transition box-shadow 0 5s ease      box-shadow 0 4px 6px rgba 0 0 0 0 1       font-smoothing subpixel-antialiased      background -o-linear-gradient  F9EFAF   F7E98D       background -ms-linear-gradient  F9EFAF   F7E98D       background -moz-linear-gradient  F9EFAF   F7E98D       background -webkit-linear-gradient  F9EFAF   F7E98D       background linear-gradient  F9EFAF   F7E98D       height 100     html      height 100     body      height 100           or javascript  var s height   document getElementById  note   scrollHeight  document getElementById  note   setAttribute  style   height   s height  px      Jsfiddle

User · Answer

For those of us accomplishing this with Angular JS  I used a directive  HTML    lt textarea elastic ng-model  someProperty  gt  lt  textarea gt    JS    directive  elastic           timeout       function  timeout            return               restrict   A               link  function  scope  element                     scope initialHeight    scope initialHeight    element 0  style height                  var resize   function                         element 0  style height    scope initialHeight                      element 0  style height        element 0  scrollHeight    px                                      element on  input change   resize                    timeout resize  0                                         timeout queues an event that will fire after the DOM loads  which is what s necessary to get the right scrollHeight  otherwise you ll get undefined

[javascript] Textarea Auto height

Examples related to javascript

Examples related to html

Examples related to css