scroll textbox to bottom? (IE)

Discussion in 'Javascript' started by Mad Scientist Jr, Jan 13, 2005.

  1. I have a textbox that i am adding to (in codebehind of ASP.NET) and
    need to ensure that the focus is scrolled to the bottom of the textbox
    each time the page refreshes, and then set focus to a 2nd textbox
    (which the user types input into).

    I have tried a couple functions I found posted online but they don't
    work (see below)

    The closest I got was using the scrolldown method:

    http://msdn.microsoft.com/library/default.asp?
    url=/workshop/author/dhtml/reference/methods/doscroll.asp

    but this only scrolls down at most 1 page. How do I scroll to the
    absolute bottom no matter how much text is in the box?

    Thanks



    in Head:

    <script type="text/javascript">
    function focusById(elemid)
    {
    elem = document.getElementById(elemid);
    if(elem)
    {
    elem.focus();
    MoveToEnd(elem);
    elem.focus();
    }
    }

    function MoveToEnd(Element)
    {
    if ( Element.createTextRange )
    Element.createTextRange().text += "";
    else if ( Element.insertionPoint )
    Element.insertionPoint = Element.text.length;
    }

    </script>
    </HEAD>


    In onload (various versions, #6 sort of worked):


    // SCROLL TO BOTTOM OF TEXTBOX #1 AND SET FOCUS ON TEXTBOX #2

    //ATTEMPT #1
    focusById(document.Form1.Textbox1);
    document.Form1.Textbox2.focus();

    //ATTEMPT #2
    var sText=document.Form1.Textbox1.value;
    document.Form1.Textbox1.value=sText;
    document.Form1.Textbox2.focus();

    //ATTEMPT #3
    document.Form1.Textbox1.focus();
    document.Form1.Textbox1.MoveToEnd(elem);
    document.Form1.Textbox1.elem.focus();
    document.Form1.Textbox2.focus();

    //ATTEMPT #4
    document.Form1.Textbox1.focus();
    document.Form1.Textbox1.MoveToEnd(elem);
    document.Form1.Textbox1.elem.focus();
    document.Form1.Textbox1.doScroll();
    document.Form1.Textbox2.focus();

    //ATTEMPT #5
    MoveToEnd(document.Form1.Textbox1);
    document.Form1.Textbox2.focus();

    //ATTEMPT #6
    //seemed to work but only scrolls down a little
    //how do i scroll to the absolute end
    //no matter how much text is in Textbox1 ?
    MoveToEnd(document.Form1.Textbox1);
    document.Form1.Textbox1.doScroll('down');
    document.Form1.Textbox2.focus();

    //ATTEMPT #7
    document.Form1.Textbox1.doScroll('down');
    document.Form1.Textbox2.focus()
     
    Mad Scientist Jr, Jan 13, 2005
    #1
    1. Advertising

  2. Mad Scientist Jr

    Zifud Guest

    Mad Scientist Jr wrote:
    > I have a textbox that i am adding to (in codebehind of ASP.NET) and
    > need to ensure that the focus is scrolled to the bottom of the textbox
    > each time the page refreshes, and then set focus to a 2nd textbox
    > (which the user types input into).


    Isn't this what HTML anchors are for?

    Add an anchor at the appropriate place, then modify the
    document.location. The browser will then work out how much to scroll
    and it is likely far more cross-browser than a "scroll by" method.


    --
    Zif
     
    Zifud, Jan 13, 2005
    #2
    1. Advertising

  3. thanks for your reply...
    what I am trying to accomplish is to scroll to the bottom of a text
    area in a form (inside the textarea), not the bottom of the html page
    itself.
     
    Mad Scientist Jr, Jan 14, 2005
    #3
  4. Mad Scientist Jr

    RobB Guest

    Mad Scientist Jr wrote:
    > I have a textbox that i am adding to (in codebehind of ASP.NET) and
    > need to ensure that the focus is scrolled to the bottom of the

    textbox
    > each time the page refreshes, and then set focus to a 2nd textbox
    > (which the user types input into).
    >
    > I have tried a couple functions I found posted online but they don't
    > work (see below)
    >
    > The closest I got was using the scrolldown method:
    >
    > http://msdn.microsoft.com/library/default.asp?
    > url=/workshop/author/dhtml/reference/methods/doscroll.asp
    >
    > but this only scrolls down at most 1 page. How do I scroll to the
    > absolute bottom no matter how much text is in the box?
    >
    > Thanks
    >
    >
    >
    > in Head:
    >
    > <script type="text/javascript">
    > function focusById(elemid)
    > {
    > elem = document.getElementById(elemid);
    > if(elem)
    > {
    > elem.focus();
    > MoveToEnd(elem);
    > elem.focus();
    > }
    > }
    >
    > function MoveToEnd(Element)
    > {
    > if ( Element.createTextRange )
    > Element.createTextRange().text += "";
    > else if ( Element.insertionPoint )
    > Element.insertionPoint = Element.text.length;
    > }
    >
    > </script>
    > </HEAD>
    >
    >
    > In onload (various versions, #6 sort of worked):
    >
    >
    > // SCROLL TO BOTTOM OF TEXTBOX #1 AND SET FOCUS ON TEXTBOX #2
    >
    > //ATTEMPT #1
    > focusById(document.Form1.Textbox1);
    > document.Form1.Textbox2.focus();
    >
    > //ATTEMPT #2
    > var sText=document.Form1.Textbox1.value;
    > document.Form1.Textbox1.value=sText;
    > document.Form1.Textbox2.focus();
    >
    > //ATTEMPT #3
    > document.Form1.Textbox1.focus();
    > document.Form1.Textbox1.MoveToEnd(elem);
    > document.Form1.Textbox1.elem.focus();
    > document.Form1.Textbox2.focus();
    >
    > //ATTEMPT #4
    > document.Form1.Textbox1.focus();
    > document.Form1.Textbox1.MoveToEnd(elem);
    > document.Form1.Textbox1.elem.focus();
    > document.Form1.Textbox1.doScroll();
    > document.Form1.Textbox2.focus();
    >
    > //ATTEMPT #5
    > MoveToEnd(document.Form1.Textbox1);
    > document.Form1.Textbox2.focus();
    >
    > //ATTEMPT #6
    > //seemed to work but only scrolls down a little
    > //how do i scroll to the absolute end
    > //no matter how much text is in Textbox1 ?
    > MoveToEnd(document.Form1.Textbox1);
    > document.Form1.Textbox1.doScroll('down');
    > document.Form1.Textbox2.focus();
    >
    > //ATTEMPT #7
    > document.Form1.Textbox1.doScroll('down');
    > document.Form1.Textbox2.focus()


    Mad:

    window.onload = function()
    {
    setTimeout(
    'document.getElementById("Textbox1").scrollTop=10000'
    ,50
    );
    document.getElementById("Textbox2").focus();
    }

    You may be confusing older style (DOM 0) hierarchial object references,
    which use form/element names (document.form_name.field_name) with DOM
    1+ document.getElementById, which uses the element's (string) id
    assigned via HTML. Be sure and id the fields as well for the above to
    work. The timer delay is just an expedient necessary in some browsers
    to allow the field to 'set up' before scripting it. Element.scrollTop
    is well-supported by now; the high value assures (more or less) that
    the entire element will be scrolled.
     
    RobB, Jan 14, 2005
    #4
  5. I got it working great - just count the # of carriage returns on the
    asp.net codebehind (carriage returns = mystring.len - replace(mystring,
    vbcrlf) / 2) and divide it by the # of rows in the textbox to get
    "pages", and send that number as a parameter X to a javascript function
    with a doScroll(pagedown), which page downs X times, That way it is
    guaranteed to be the correct # of pages, and pagedown is FAST (doing
    scroll down by # of lines is slow, you can literally see the textarea
    scroll!). Anyway it works great !
     
    Mad Scientist Jr, Jan 17, 2005
    #5
    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.

Share This Page