Textarea to resize based on content length

Question

I need a textarea where I type my text in the box  it grows in length as needed to avoid having to deal with scroll bars and it need to shrink after delete text  I didn   t want to go down the mootools or jquery route because I have a lightweight form

User · Accepted Answer

You can check the content s height by setting to 1px and then reading the scrollHeight property   x000D   x000D  function textAreaAdjust element      element style height    1px     element style height    25 element scrollHeight   px     x000D   lt textarea onkeyup  textAreaAdjust this   style  overflow hidden  gt  lt  textarea gt  x000D   x000D   x000D   It works under Firefox 3  IE 7  Safari  Opera and Chrome

User · Answer

Alciende s answer didn t quite work for me in Safari for whatever reason just now  but did after a minor modification   function textAreaAdjust o        o style height    1px       setTimeout function             o style height    o scrollHeight   px          1       Hope this helps someone

User · Answer

You may also try contenteditable attribute onto a normal p or div  Not really a textarea but it will auto-resize without script   x000D   x000D   divtext       border  ridge 2px      padding  5px      width  20em      min-height  5em      overflow  auto    x000D   lt div class  divtext  contentEditable gt Hello World lt  div gt  x000D   x000D   x000D

User · Answer

A jquery solution has been implemented  and source code is available in github at  https   github com jackmoore autosize

User · Answer

You can achieve this by using a span and a textarea   You have to update the span with the text in textarea each time the text is changed  Then set the css width and height of the textarea to the span s clientWidth and clientHeight property   Eg     textArea       border   a9a9a9 1px solid      overflow  hidden      width   expression  document getElementById  spnHidden   clientWidth        height  expression  document getElementById  spnHidden   clientHeight

User · Answer

I don t think there s any way to get width of texts in variable-width fonts  especially in javascript   The only way I can think is to make a hidden element that has variable width set by css  put text in its innerHTML  and get the width of that element  So you may be able to apply this method to cope with textarea auto-sizing problem

User · Answer

Decide a width and check how many characters one line could hold  and then for each key pressed you call a function that looks something like   function changeHeight     var chars per row   100  var pixles per row   16  this style height   Math round  this value length   chars per row    pixles per row     px       Havn t tested the code

User · Answer

One method is to do it without JavaScript and this is something like this        lt textarea style  overflow  visible    gt

User · Answer

Use this function   function adjustHeight el       el style height    el scrollHeight  gt  el clientHeight     el scrollHeight   px     60px       Use this html    lt textarea onkeyup  adjustHeight this   gt  lt  textarea gt    And finally use this css   textarea   min-height  60px  overflow-y  auto  word-wrap break-word     The solution simply is letting the scrollbar appears to detect that height needs to be adjusted  and whenever the scrollbar appears in your text area  it adjusts the height just as much as to hide the scrollbar again

[javascript] Textarea to resize based on content length

Examples related to javascript