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. Advertisements

  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. Advertisements

  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. Advertisements

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:
    827
    Lonnie Princehouse
    Jul 11, 2005
  2. Ralf W. Grosse-Kunstleve
    Replies:
    18
    Views:
    934
    Bengt Richter
    Jul 11, 2005
  3. Ralf W. Grosse-Kunstleve
    Replies:
    2
    Views:
    654
    Dan Sommers
    Jul 12, 2005
  4. falcon
    Replies:
    0
    Views:
    565
    falcon
    Jul 31, 2005
  5. Bart Kastermans
    Replies:
    6
    Views:
    624
    Bart Kastermans
    Jul 13, 2008
  6. Replies:
    6
    Views:
    272
    Vivek
    Jan 25, 2006
  7. Pil (Trustworthy from Experience)

    Resizing a div by resizing its borders

    Pil (Trustworthy from Experience), Apr 18, 2009, in forum: Javascript
    Replies:
    9
    Views:
    603
    Proper
    Apr 21, 2009
  8. Proper
    Replies:
    0
    Views:
    343
    Proper
    Apr 18, 2009
Loading...