Question

I’m currently using the html5 autofocus for a login form. I am looking for a function that will autofocus the username textbox only if empty, and if not empty to autofocus on the next textbox.

Answer 1

With the HTML below

<input name="username" value="a" autofocus="autofocus">
<input name="password" type="password">​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

You can do something like this with jQuery

var $username = $('[name="username"]');
var $password = $('[name="password"]');
if($username.val()​​​​​​​​​​​​​​​​​​​​​.trim().length > 0){
    $password.focus();
}​

Should be that simple. Make sure Javascript is at the bottom of the page or you can use $(document).ready() function to make sure Javascript is run after HTML is rendered.

---

More details based on additional information

<asp:TextBox ID="UserName" runat="server" autofocus="true" required="true"></asp:TextBox>

The reason it doesn’t work for your case is because you don’t have an attribute called “name”. I think you probably should read a little bit about jQuery selector to understand why. If you use ID, then this is how you would do it.

var $username = $('#UserName');
var $password = $('#password');
if($username.val()​​​​​​​​​​​​​​​​​​​​​.trim().length > 0){
    $password.focus();
}​

Of course you now have to match the selector for password so it will actually select password input to set the focus on.