SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,727
    Mentioned
    43 Post(s)
    Tagged
    0 Thread(s)

    Internal Anchor + Form Input Focus... Is it Possible to do Both??

    Hi.

    Here's something I thought would work but it apparently doesn't.

    I have a comment link that is meant to carry users down to the bottom of the webpage (where the form is) and focus on the first input of the form.

    I've marked this up something like this...


    Code HTML4Strict:
    <a href="#CommentForm" onclick="document.getElementById('TheCommentsForm').TheFirstInput.focus();">Post Comment</a>

    Despite seeming obvious, though, this actually doesn't work.

    The internal link works fine... the webpage drops down to where the anchor is... however the form input is not given focus.

    The odd thing is that there is no Javascript error popping up either.

    I've also tried swapping around the attributes in the link tag...


    Code HTML4Strict:
    <a onclick="document.getElementById('TheCommentsForm').TheFirstInput.focus();" href="#CommentForm">Post Comment</a>

    ...but there was a similar result.

    The only time the form input was given focus was when the Javascript was the ONLY command...


    Code HTML4Strict:
    <a href="javascript:document.getElementById('TheCommentsForm').TheFirstInput.focus();" >Post Comment</a>

    Does anyone know of any work-around with this??... Is it that I'm doing something wrong??... Or am I doomed to have to sacrifice one for the other??

    Many thanks for your suggestions.




    Trying to fill the unforgiving minute
    with sixty seconds' worth of distance run.

    Update on Sitepoint's Migration to Discourse

  2. #2
    SitePoint Wizard holmescreek's Avatar
    Join Date
    Mar 2001
    Location
    Northwest Florida
    Posts
    1,707
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    TheFirstInput is messing you up. TheCommentsForm should be the id of the actual form field that you want to place into focus. With the example I gave you, it should jump to #TheCommentForm field and place it into focus.

    Code:
    <a href="#CommentForm" onclick="document.getElementById('TheCommentsForm').TheFirstInput.focus();">Post Comment</a> change to :
    <a href="#TheCommentForm" onclick="document.getElementById('TheCommentsForm').focus();">Post Comment</a>
    intragenesis, llc professional web & graphic design

  3. #3
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,727
    Mentioned
    43 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the suggestion.

    I tried it but it didn't make a difference.

    The page dropped down to where the internal anchor was and that was that. As before, there was no Javascript error.

    Again, the only way to get it to actually focus on the field seems to be to remove the internal anchor.

    There must be a way to do both.




    Trying to fill the unforgiving minute
    with sixty seconds' worth of distance run.

    Update on Sitepoint's Migration to Discourse

  4. #4
    SitePoint Zealot
    Join Date
    Sep 2007
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    your tags basically conflict with each other

    setting the href="#CommentForm" automatically gives that anchor tag focus

    so make your link
    Code HTML4Strict:
    <a href="#CommentForm">Post Comment</a>

    then on the actual anchor tag add

    Code HTML4Strict:
    onFocus="document.getElementById('TheCommentsForm').TheFirstInput.focus();"

  5. #5
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,727
    Mentioned
    43 Post(s)
    Tagged
    0 Thread(s)
    Theory is sound but it's still not working...

    Here's my actual code and mark-up...


    Code HTML4Strict:
    <p style='width:95%; text-align:right;'><a href='#PostForm'>reply</a></p>

    Code HTML4Strict:
    <a name='PostForm' onfocus="document.getElementById('Viewer_NameInput').focus();"></a>
     
    <form id="Viewer_CommentsForm" action="/comments/TakeComments.php" method="post">
    	<p>
    		<input id='Viewer_NameInput' name='Viewer_NameInput' type='text' value='' />
    		<label for="Viewer_NameInput"> - Name</label>
    	</p>
    (etc...)
    </form>
    Trying to fill the unforgiving minute
    with sixty seconds' worth of distance run.

    Update on Sitepoint's Migration to Discourse

  6. #6
    SitePoint Zealot
    Join Date
    Sep 2007
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Doesn't it already scroll to the input field when you focus to it? do you need the anchor tag?

  7. #7
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,727
    Mentioned
    43 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gimbles
    Doesn't it already scroll to the input field when you focus to it? do you need the anchor tag?
    Yes. Because the field is at the bottom of the page, when it scrolls down all viewers see is that top input field... just barely peeping over the bottom of the window.

    I want them to see the whole form.

    I'd be much easier for them to understand what's going on if they see the whole form at once.




    Trying to fill the unforgiving minute
    with sixty seconds' worth of distance run.

    Update on Sitepoint's Migration to Discourse

  8. #8
    SitePoint Zealot
    Join Date
    Sep 2007
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Shaun(OfTheDead) View Post
    Yes. Because the field is at the bottom of the page, when it scrolls down all viewers see is that top input field... just barely peeping over the bottom of the window.

    I want them to see the whole form.

    I'd be much easier for them to understand what's going on if they see the whole form at once.




    Yea I got it, man this is a wierd problem, I'm having trouble with it myself

  9. #9
    SitePoint Zealot
    Join Date
    Sep 2007
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I GOT IT!

    Code:
    <a href="javascript:window.location.hash='PostForm';document.getElementById('Viewer_NameInput').focus();">reply</a>
    and leave the anchor as

    Code:
    <a name='PostForm'></a>

  10. #10
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,727
    Mentioned
    43 Post(s)
    Tagged
    0 Thread(s)


    WOO!!

    Wow, thanks a lot, dude. I'm astonished !!

    Hey, the next time you're in Trinidad I need to buy you a beer.




    Trying to fill the unforgiving minute
    with sixty seconds' worth of distance run.

    Update on Sitepoint's Migration to Discourse

  11. #11
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,727
    Mentioned
    43 Post(s)
    Tagged
    0 Thread(s)
    HA!!




    Trying to fill the unforgiving minute
    with sixty seconds' worth of distance run.

    Update on Sitepoint's Migration to Discourse

  12. #12
    SitePoint Zealot
    Join Date
    Sep 2007
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Shaun(OfTheDead) View Post


    WOO!!

    Wow, thanks a lot, dude. I'm astonished !!

    Hey, the next time you're in Trinidad I need to buy you a beer.




    I'll remember that

  13. #13
    SitePoint Wizard holmescreek's Avatar
    Join Date
    Mar 2001
    Location
    Northwest Florida
    Posts
    1,707
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    nifty solution, but I'd stick in a comment so that when you come back to the code a year+ later, you know what the heck it does. If it works, it works, but on the safe side make sure that it doesn't choke on non-IE browsers -- not saying it will, but, always double check.
    intragenesis, llc professional web & graphic design


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •