How to autosize a textarea using Prototype

Question

I m currently working on an internal sales application for the company I work for  and I ve got a form that allows the user to change the delivery address   Now I think it would look much nicer  if the textarea I m using for the main address details would just take up the area of the text in it  and automatically resize if the text was changed   Here s a screenshot of it currently     Any ideas      Chris  A good point  but there are reasons I want it to resize  I want the area it takes up to be the area of the information contained in it  As you can see in the screen shot  if I have a fixed textarea  it takes up a fair wack of vertical space   I can reduce the font  but I need address to be large and readable  Now I can reduce the size of the text area  but then I have problems with people who have an address line that takes 3 or 4  one takes 5  lines  Needing to have the user use a scrollbar is a major no-no   I guess I should be a bit more specific  I m after vertical resizing  and the width doesn t matter as much  The only problem that happens with that  is the ISO number  the large  1   gets pushed under the address when the window width is too small  as you can see on the screenshot    It s not about having a gimick  it s about having a text field the user can edit that won t take up unnecessary space  but will show all the text in it   Though if someone comes up with another way to approach the problem I m open to that too     I ve modified the code a little because it was acting a little odd  I changed it to activate on keyup  because it wouldn t take into consideration the character that was just typed   resizeIt   function       var str      iso address   value    var cols      iso address   cols    var linecount   0      A str split   n    each function l        linecount    1   Math floor l length   cols      Take into account long lines            iso address   rows   linecount

User · Answer

Here is a function I just wrote in jQuery to do it - you can port it to Prototype, but they don't support the "liveness" of jQuery so elements added by Ajax requests will not respond.

This version not only expands, but it also contracts when delete or backspace is pressed.

This version relies on jQuery 1.4.2.

Enjoy ;)

http://pastebin.com/SUKeBtnx

Usage:

$("#sometextarea").textareacontrol();

or (any jQuery selector for example)

$("textarea").textareacontrol();

It was tested on Internet Explorer 7/Internet Explorer 8, Firefox 3.5, and Chrome. All works fine.

User · Answer

My solution not using jQuery  because sometimes they don t have to be the same thing  is below  Though it was only tested in Internet nbsp Explorer nbsp 7  so the community can point out all the reasons this is wrong   textarea onkeyup   function      this style height   this scrollHeight    px       So far I really like how it s working  and I don t care about other browsers  so I ll probably apply it to all my textareas      Make all textareas auto-resize vertically var textareas   document getElementsByTagName  textarea     for  i   0  i lt textareas length  i             Retain textarea s starting height as its minimum height     textareas i  minHeight   textareas i  offsetHeight       textareas i  onkeyup   function              this style height   Math max this scrollHeight  this minHeight     px             textareas i  onkeyup       Trigger once to set initial height

User · Answer

I needed this function for myself  but none of the ones from here worked as I needed them   So I used Orion s code and changed it   I added in a minimum height  so that on the destruct it does not get too small   function resizeIt  id  maxHeight  minHeight         var text   id  amp  amp  id style   id   document getElementById id       var str   text value      var cols   text cols      var linecount   0      var arStr   str split    n           arStr  each function s            linecount   linecount   1   Math floor arStr s  length   cols      take into account long lines             linecount        linecount   Math max minHeight  linecount       linecount   Math min maxHeight  linecount       text rows   linecount

User · Answer

Probably the shortest solution   jQuery document  ready function        jQuery   textArea   on  keydown keyup   function            this style height    1px           this style height    this scrollHeight     px                  This way you don t need any hidden divs or anything like that   Note  you might have to play with this style height    this scrollHeight     px   depending on how you style the textarea  line-height  padding and that kind of stuff

User · Answer

Here is a solution with JQuery     document  ready function         var  abc       abc         abc css  height    abc attr  scrollHeight          abc is a teaxtarea

User · Answer

Here s a Prototype version of resizing a text area that is not dependent on the number of columns in the textarea  This is a superior technique because it allows you to control the text area via CSS as well as have variable width textarea  Additionally  this version displays the number of characters remaining  While not requested  it s a pretty useful feature and is easily removed if unwanted     inspired by  http   github com jaz303 jquery-grab-bag blob 63d7e445b09698272b2923cb081878fd145b5e3d javascripts jquery autogrow-textarea js if  window Widget    undefined  window Widget         Widget Textarea   Class create     initialize  function textarea  options          this textarea     textarea       this options    H          min height    30         max length    400        update options        this textarea observe  keyup   this refresh bind this         this  shadow   new Element  div   setStyle         lineHeight   this textarea getStyle  lineHeight          fontSize   this textarea getStyle  fontSize          fontFamily   this textarea getStyle  fontFamily          position    absolute         top   -10000px         left   -10000px         width  this textarea getWidth      px              this textarea insert   after  this  shadow          this  remainingCharacters   new Element  p   addClassName  remainingCharacters        this textarea insert  after  this  remainingCharacters          this refresh              refresh  function            this  shadow update  F this textarea  replace   n g    lt br  gt          this textarea setStyle         height  Math max parseInt this  shadow getHeight      parseInt this textarea getStyle  lineHeight   replace  px         this options get  min height       px               var remaining   this options get  max length   -  F this textarea  length      this  remainingCharacters update Math abs remaining       characters      remaining  gt  0    remaining     over the limit               Create the widget by calling new Widget Textarea  element id    The default options can be overridden by passing them as an object  e g  new Widget Textarea  element id     max length  600  min height  50    If you want to create it for all textareas on the page  do something like   Event observe window   load   function           textarea   each function textarea        new Widget Textarea textarea

User · Answer

Like the answer of  memical   However I found some improvements  You can use the jQuery height   function  But be aware of padding-top and padding-bottom pixels  Otherwise your textarea will grow too fast     document  ready function        textarea       my-textarea          There is some diff between scrollheight and height          padding-top and padding-bottom   var diff    textarea prop  scrollHeight   -  textarea height       textarea live  keyup   function         var height    textarea prop  scrollHeight   - diff       textarea height height

User · Answer

I ve made something quite easy  First I put the TextArea into a DIV  Second  I ve called on the ready function to this script    lt div id  divTable  gt     lt textarea ID  txt  Rows  1  TextMode  MultiLine    gt   lt  div gt     document  ready function        var heightTextArea       txt   height      var divTable   document getElementById  divTable          txt   attr  rows   parseInt parseInt divTable  style height    parseInt altoFila           Simple  It is the maximum height of the div once it is rendered  divided by the height of one TextArea of one row

User · Answer

For those that are coding for IE and encounter this problem  IE has a little trick that makes it 100  CSS    lt TEXTAREA style  overflow  visible   cols  100       gt  lt  TEXTAREA gt    You can even provide a value for rows  n  which IE will ignore  but other browsers will use  I really hate coding that implements IE hacks  but this one is very helpful  It is possible that it only works in Quirks mode

User · Answer

Here is an extension to the Prototype widget that Jeremy posted on June 4th   It stops the user from entering more characters if you re using limits in textareas  It checks if there are characters left  If the user copies text into the textarea  the text is cut off at the max  length          Prototype Widget  Textarea    Automatically resizes a textarea and displays the number of remaining chars        From  http   stackoverflow com questions 7477 autosizing-textarea    Inspired by  http   github com jaz303 jquery-grab-bag blob 63d7e445b09698272b2923cb081878fd145b5e3d javascripts jquery autogrow-textarea js     if  window Widget    undefined  window Widget         Widget Textarea   Class create     initialize  function textarea  options       this textarea     textarea       this options    H          min height    30         max length    400        update options        this textarea observe  keyup   this refresh bind this         this  shadow   new Element  div   setStyle         lineHeight   this textarea getStyle  lineHeight          fontSize   this textarea getStyle  fontSize          fontFamily   this textarea getStyle  fontFamily          position    absolute         top   -10000px         left   -10000px         width  this textarea getWidth      px              this textarea insert   after  this  shadow          this  remainingCharacters   new Element  p   addClassName  remainingCharacters        this textarea insert  after  this  remainingCharacters          this refresh              refresh  function         this  shadow update  F this textarea  replace   n g    lt br  gt          this textarea setStyle         height  Math max parseInt this  shadow getHeight      parseInt this textarea getStyle  lineHeight   replace  px         this options get  min height       px                  Keep the text character count inside the limits      if  F this textarea  length  gt  this options get  max length           text    F this textarea  substring 0  this options get  max length             this textarea value   text          return false             var remaining   this options get  max length   -  F this textarea  length      this  remainingCharacters update Math abs remaining       characters remaining

User · Answer

Using ASP NET  just simply do this    lt html xmlns  http   www w3 org 1999 xhtml  gt       lt head gt           lt title gt Automatic Resize TextBox lt  title gt           lt script type  text javascript  gt              function setHeight txtarea                    txtarea style height   txtdesc scrollHeight    px                          lt  script gt       lt  head gt        lt body gt           lt form id  form1  runat  server  gt               lt asp TextBox ID  txtarea  runat   server  TextMode  MultiLine   onkeyup  setHeight this    onkeydown  setHeight this      gt           lt  form gt       lt  body gt   lt  html gt

User · Answer

Just revisiting this  I ve made it a little bit tidier  though someone who is full bottle on Prototype JavaScript could suggest improvements     var TextAreaResize   Class create    TextAreaResize prototype       initialize  function element  options        element     element       this element   element       this options   Object extend                  options              Event observe this element   keyup         this onKeyUp bindAsEventListener this        this onKeyUp            onKeyUp  function            We need this variable because  this  changes in the scope of the        function below      var cols   this element cols       var linecount   0       A this element value split   n    each function l             We take long lines into account via the cols divide        linecount    1   Math floor l length   cols               this element rows   linecount          Just it call with   new TextAreaResize  textarea id name here

User · Answer

memical had an awesome solution for setting the height of the textarea on pageload with jQuery  but for my application I wanted to be able to increase the height of the textarea as the user added more content   I built off memical s solution with the following     document  ready function         var  textarea      p body textarea         textarea css  height     textarea attr  scrollHeight     20         textarea keyup function            var current height    textarea css  height   replace  px       1          if  current height   5  lt    textarea attr  scrollHeight                   textarea css  height     textarea attr  scrollHeight     20                            It s not very smooth but it s also not a client-facing application  so smoothness doesn t really matter    Had this been client-facing  I probably would have just used an auto-resize jQuery plugin

User · Answer

Internet Explorer  Safari  Chrome and Opera users need to remember to explicidly set the line-height value in CSS  I do a stylesheet that sets the initial properites for all text boxes as follows    lt style gt      TEXTAREA   line-height  14px  font-size  12px  font-family  arial    lt  style gt

User · Answer

One refinement to some of these answers is to let CSS do more of the work   The basic route seems to be    Create a container element to hold the textarea and a hidden div Using Javascript  keep the textarea   s contents synced with the div   s Let the browser do the work of calculating the height of that div Because the browser handles rendering   sizing the hidden div  we avoid explicitly setting the textarea   s height     x000D   x000D  document addEventListener  DOMContentLoaded        gt    x000D      textArea addEventListener  change   autosize  false  x000D      textArea addEventListener  keydown   autosize  false  x000D      textArea addEventListener  keyup   autosize  false  x000D      autosize   x000D     false  x000D   x000D  function autosize     x000D         Copy textarea contents to div browser will calculate correct height x000D         of copy  which will make overall container taller  which will make x000D         textarea taller  x000D      textCopy innerHTML   textArea value replace   n g    lt br  gt    x000D    x000D  html  body  textarea   x000D      font-family  sans-serif  x000D      font-size  14px  x000D    x000D   x000D   textarea-container   x000D      position  relative  x000D    x000D   x000D   textarea-container  gt  div   textarea-container  gt  textarea   x000D      word-wrap  break-word     make sure the div and the textarea wrap words in the same way    x000D      box-sizing  border-box  x000D      padding  2px  x000D      width  100   x000D    x000D   x000D   textarea-container  gt  textarea   x000D      overflow  hidden  x000D      position  absolute  x000D      height  100   x000D    x000D   x000D   textarea-container  gt  div   x000D      padding-bottom  1 5em     A bit more than one additional line of text      x000D      visibility  hidden  x000D    x000D   lt div class  textarea-container  gt  x000D       lt textarea id  textArea  gt  lt  textarea gt  x000D       lt div id  textCopy  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Check the below link  http   james padolsey com javascript jquery-plugin-autoresize     document  ready function              ExpandableTextCSS   autoResize              On resize          onResize  function                    this  css   opacity  0 8                           After resize          animateCallback  function                    this  css   opacity  1                           Quite slow animation          animateDuration  300             More extra space          extraSpace 20            Textarea height limit         limit 10

User · Answer

Facebook does it  when you write on people s walls  but only resizes vertically   Horizontal resize strikes me as being a mess  due to word-wrap  long lines  and so on  but vertical resize seems to be pretty safe and nice   None of the Facebook-using-newbies I know have ever mentioned anything about it or been confused  I d use this as anecdotal evidence to say  go ahead  implement it    Some JavaScript code to do it  using Prototype  because that s what I m familiar with     lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 01 Transitional  EN     http   www w3 org TR html4 loose dtd  gt   lt html gt       lt head gt           lt script src  http   www google com jsapi  gt  lt  script gt           lt script language  javascript  gt              google load  prototype    1 6 0 2             lt  script gt       lt  head gt        lt body gt           lt textarea id  text-area  rows  1  cols  50  gt  lt  textarea gt            lt script type  text javascript  language  javascript  gt              resizeIt   function                   var str      text-area   value                var cols      text-area   cols                 var linecount   0                 A str split   n    each  function l                      linecount    Math ceil  l length   cols       Take into account long lines                                   text-area   rows   linecount   1                                 You could attach to keyUp  etc  if keydown doesn t work             Event observe  text-area    keydown   resizeIt                 resizeIt      Initial on load          lt  script gt       lt  body gt   lt  html gt    PS  Obviously this JavaScript code is very naive and not well tested  and you probably don t want to use it on textboxes with novels in them  but you get the general idea

User · Answer

Here s another technique for autosizing a textarea    Uses pixel height instead of line height  more accurate handling of line wrap if a proportional font is used  Accepts either ID or element as input Accepts an optional maximum height parameter - useful if you d rather not let the text area grow beyond a certain size  keep it all on-screen  avoid breaking layout  etc   Tested on Firefox 3 and Internet nbsp Explorer nbsp 6   Code   plain vanilla JavaScript   function FitToContent id  maxHeight       var text   id  amp  amp  id style   id   document getElementById id      if   text        return         Accounts for rows being deleted  pixel value may need adjusting       if  text clientHeight    text scrollHeight          text style height    30px            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            Demo   uses jQuery  targets on the textarea I m typing into right now - if you have Firebug installed  paste both samples into the console and test on this page       post-text   keyup function        FitToContent this  document documentElement clientHeight

[javascript] How to autosize a textarea using Prototype?

Examples related to javascript

Examples related to html

Examples related to css

Examples related to textarea

Examples related to prototypejs