Self-resizing textarea

Discussion in 'Javascript' started by Ivor Somerset, Nov 24, 2006.

  1. Hello,

    At http://tuckey.org/textareasizer/ there's a script that autoresized
    the height of the textareas in a form so that it matches the content.
    This is a very interesting capability, however that script has a big
    drawback: the number of rows (lines) needed to fit the content is an
    estimate (based on the "cols" attribute in "textarea") and in most cases
    the textarea box will not match exactly the content.
    So I've thought of an improvement based on the difference between the
    "viewport" of the textarea (given by clientHeight) and the total height
    of the content (=scrollHeight). So long as the scrollHeight is larger
    than the clientHeight, a new row is added. There's also a test to cater
    for the reverse effect, ie when rows must be withdrawn.

    I give you the script as is. It works in FireFox but not in IE (I
    haven't tried other browsers). Comments and improvements will be
    appreciated.

    <html>
    <head>
    <style type="text/css">
    <!--
    textarea {overflow:hidden;}
    -->
    </style>
    <script type="text/javascript">
    <!--
    function autoResizeTextareas(){
    var form = document.forms[0];
    for (var x in form) {
    if (!form[x]) continue;
    if(typeof form[x].rows != "number") continue;
    while((form[x].scrollHeight == form[x].clientHeight) && (form[x].rows
    > 0)) form[x].rows--;

    if(form[x].scrollHeight > form[x].clientHeight){
    while(form[x].scrollHeight > form[x].clientHeight) form[x].rows++;
    }
    }
    setTimeout("autoResizeTextareas();",300);
    }
    // -->
    </script>
    </head>
    <body onload="autoResizeTextareas();">
    <form>
    <textarea cols="60" rows="1" name="textarea1">Some text</textarea>
    </form>
    </body>
    </html>
    Ivor Somerset, Nov 24, 2006
    #1
    1. Advertising

  2. Hello Jonas,

    > if (!form[x]) continue;
    > This will be true only if form[x] is a property with a value that when
    > turned into boolean becomes false.

    It was in the original script. In fact I don't see why this test is
    necessary.

    >
    > > if(typeof form[x].rows != "number") continue;

    >
    > Why not a loop in form.elements? Then you look for the type property, if
    > it's equals to "textarea". ^^

    Also in the original script. In my opinion, not a bad way to test if the
    element is a textarea.

    >> while((form[x].scrollHeight == form[x].clientHeight) &&
    >> (form[x].rows > 0)) form[x].rows--;
    >> if(form[x].scrollHeight > form[x].clientHeight){
    >> while(form[x].scrollHeight > form[x].clientHeight)
    >> form[x].rows++;

    >
    > Instead of increasing/decreasing rows, why don't you try: style.height =
    > scrollHeight + "px"
    >
    >> setTimeout("autoResizeTextareas();",300);

    >
    > Hmmm, I think you should assign this to a key event/onchange instead of
    > checking every 300msec.


    Two excellent ideas.
    Ivor Somerset, Nov 24, 2006
    #2
    1. Advertising

  3. Ivor Somerset

    Jonas Raoni Guest

    Ivor Somerset escreveu:
    > I give you the script as is. It works in FireFox but not in IE (I
    > haven't tried other browsers). Comments and improvements will be
    > appreciated.
    >
    > function autoResizeTextareas(){
    > var form = document.forms[0];
    > for (var x in form) {
    > if (!form[x]) continue;


    This will be true only if form[x] is a property with a value that when
    turned into boolean becomes false.

    > if(typeof form[x].rows != "number") continue;


    Why not a loop in form.elements? Then you look for the type property, if
    it's equals to "textarea". ^^


    > while((form[x].scrollHeight == form[x].clientHeight) &&
    > (form[x].rows > 0)) form[x].rows--;
    > if(form[x].scrollHeight > form[x].clientHeight){
    > while(form[x].scrollHeight > form[x].clientHeight)
    > form[x].rows++;


    Instead of increasing/decreasing rows, why don't you try: style.height =
    scrollHeight + "px"

    > setTimeout("autoResizeTextareas();",300);


    Hmmm, I think you should assign this to a key event/onchange instead of
    checking every 300msec.


    --
    Jonas Raoni Soares Silva
    http://www.jsfromhell.com
    Jonas Raoni, Nov 24, 2006
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Ralf W. Grosse-Kunstleve
    Replies:
    16
    Views:
    559
    Lonnie Princehouse
    Jul 11, 2005
  2. Ralf W. Grosse-Kunstleve
    Replies:
    18
    Views:
    579
    Bengt Richter
    Jul 11, 2005
  3. Ralf W. Grosse-Kunstleve
    Replies:
    2
    Views:
    389
    Dan Sommers
    Jul 12, 2005
  4. falcon
    Replies:
    0
    Views:
    358
    falcon
    Jul 31, 2005
  5. Bart Kastermans
    Replies:
    6
    Views:
    384
    Bart Kastermans
    Jul 13, 2008
Loading...

Share This Page