CODEWITHSUNDEEP
jquery
Jimmy
Jimmy

Reputation: 9815

Jquery - Focus on an input field in a form on pageload?

I am trying to focus on the username input in my login screen to allow for easier access to logging in and currently my jquery looks like this

$(document).ready(function() {
    $('#Username').focus();
});

but that doesn't work... any ideas?

Upvotes: 5

Views: 14836

Answers (6)

Matheno
Matheno

Reputation: 4142

A timeout will probably do the trick:

   $(document).ready(function() {
        setTimeout(function(){
            $("input[name='inputname']").focus();
        }, 200);
    });

Upvotes: 3

Michel
Michel

Reputation: 9440

Internet Explorer got some problems with for example this code:

$(document).ready(function(){
        //focus on search field
        $("#userSearchField").focus();
});

How stupid it looks, but this solved the problem for me:

$(document).ready(function(){
    //focus on search field
    $("#userSearchField").focus();
    $("#userSearchField").focus();
});

Or try to use setTimeout

Upvotes: 1

Mike Blandford
Mike Blandford

Reputation: 4012

It does work in the following simple example. Therefore there is something else going on on your page that causes the input to lose focus. I suggest using setTimeout to set the focus.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>test!</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
    </script>
    <script type="text/javascript">
      $(document).ready(function() {
    $('#Username').focus();
});
    </script>

  </head>

  <body>
  <input id="Username" />
  </body>
</html>

Upvotes: 5

chaos
chaos

Reputation: 124297

Well, that is how you do it. Make sure the ID is correct, I suppose.

Upvotes: 1

Dark Falcon
Dark Falcon

Reputation: 44181

Your HTML looks like <input id="Username" ...> (Case-sensitive)?

Upvotes: 0

John Sheehan
John Sheehan

Reputation: 78104

Does the tag have an id attribute?

<input id="Username" name="Username" type="text" />

I'm guessing it only has a name attribute: 

<input name="Username" type="text" />

If you can't add the ID attribute, you can select it like this:

$("input[name='Username']").focus();

Upvotes: 5

Related Questions