#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2001
    Posts
    45
    Rep Power
    14

    Javascript form focus issue


    I have a simple textarea below. When you click on the link it takes a value and puts it in the textarea which is great. But what I need is for the textarea to focus right after the value is inserted into the textarea. I need the textarea to take the value, put in a break, and then focus the area allowing someone to immediately type in the textarea. Any help would be geatly appreciated.

    <a href="#" onclick="document.forms.frmMedia.taComments.value='Caption1'">Caption1</a><br>


    <form action="add_comment.asp" method="post" name="frmMedia" id="frmMedia">
    <textarea name="taComments" rows="16" cols="35" class="InputText" style="overflow: auto"></textarea></td>
    </form>
  2. #2
  3. No Profile Picture
    Moderator =(8^(|)
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Feb 2002
    Location
    Sacramento, CA
    Posts
    1,710
    Rep Power
    14
    <a href="#" onclick="document.forms.frmMedia.taComments.value='Caption1';document.forms.frmMedia.taComments.focu s();return false;">Caption1</a><br>
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2002
    Location
    Seattle WA
    Posts
    863
    Rep Power
    14
    Code:
    <a href="javascript&#58; 
        document.forms.frmMedia.taComments.value='Caption1';
        document.forms.frmMedia.taComments.focus();">
        Caption1
    </a><br />
    <form action="add_comment.asp" method="post" name="frmMedia">
    <textarea name="taComments" rows="16" cols="35"style="overflow: auto"></textarea>
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2001
    Posts
    45
    Rep Power
    14

    Javascript form focus issue


    This returns the focus to the very beginning of the form field. What I need is for it to focus on the first line after the caption is inserted:

    Caption1
    (return focus here)

    Any help would be greatly appreciated.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2002
    Location
    Seattle WA
    Posts
    863
    Rep Power
    14
    Where the curser by default is placed is a browser implementation, and you don't really have control over this. Mozilla places the cursor at the end of the box, though Explorer places it at the beginning.

    I have figured something out, though this is more of a clobber approach, and may easily break on future versions. In general, you can't control where the cursor is put. That said, this solution works in Explorer 6+, Mozilla, and maybe others. Why? Not really sure...I have a few guesses, but they're just that, so I'm not gonna go on.

    Code:
    <a href="javascript&#58; document.forms.frmMedia.taComments.focus();
        document.forms.frmMedia.taComments.value='Caption1';
        document.forms.frmMedia.taComments.focus();">
        Caption1
    </a>
    <br />
    <form action="add_comment.asp" method="post" name="frmMedia">
    <textarea name="taComments" rows="16" cols="35"style="overflow: auto"></textarea>
    </form>
    The first focus call sends the focus to the text area. Then, the value is set, and the second focus call seems to send the cursor to the end of the text for some reason. Its sorta like voodoo.
  10. #6
  11. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    <html>
    <head>
    <title>untitled</title>
    </head>
    <body>
    <form action="add_comment.asp" method="post" name="frmMedia" id="frmMedia">
    <textarea name="taComments" rows="16" cols="35" class="InputText" style="overflow: auto"></textarea></td>
    </form>
    <a href="javascript&#58;;"
    onclick="t=document.forms.frmMedia.taComments;t.focus();t.value+='Caption1\n'">
    Caption1</a>
    </body>
    </html>

IMN logo majestic logo threadwatch logo seochat tools logo