Question

I have an issue with gaining focus on my first input field in my login dropdown.
I’m using jquery 1.7.2 and bootstrap 2.1.1 with only the modal and dropdown functions.
They both work great, I call dropdowns and modals through data target and not JS.

I’ve been trying for hours and searching for answers everywhere but I can’t find a way to get my first input field (#j_username) to gain focus when the dropdown is shown.

The shown event from bootstrap does not fire, so I did a jQuery on() event which fires fine.
My selector works fine, I’ve tested it in the console with other methods (hide() and show(), and various ways of selecting the same field (either its id #j_username) or ($(“#fields input:first”).

The event fires correctly but no way to get the input field to gain focus.
I’ve tried HTML5’s autofocus property but it doesn’t seem to work either.

Any ideas? Thanks in advance

The handler is part of function onPageReady().

$("#loginlnk").on('click', function(){
console.log("FIRE");
$("#j_username").focus();
});

<span class="span-dropdown">
    <button class="dropdown-toggle btn grey" role="button" id="loginlnk" data-toggle="dropdown" href='#'>Login</button>
    <div class="dropdown-menu auth" role="menu" id="signin" aria-labelledby="loginlnk">
    <form-login action="/j_spring_security_check" method="POST" always-use-default-target='false'  default-target-url="/home.do" authentication-failure-url="/welcome.do" />
    <div class="dropdown-caret right">
        <span class="caret-outer"></span>
        <span class="caret-inner"></span>
    </div>
    <div id="fields">   
         <div id="username">Enter your email address
         <input class="inputs login" autofocus="autofocus" id="j_username" name="j_username">
          </div>
          <div id="password">Password
          <input class="inputs login" id ="j_password" name="j_password" type="password" >
          </div>
     </div>
     <div id="submit">
        <button class="btn mapit" id="signinbtn" type="submit" value="Login" onClick="login(1)" tabindex="102">Login</button>
    </div>
    <div id="links">
        <a id="pwdlnk" href="javascript:lostPwd();">Lost your password?</a>         
    </div> 
    <div id="lostpwd">
        Enter your email to receive recovery instructions.
        <div class="container">
        <input class="inputs login" type="email" id="lost_username" tabindex="400">
        <button class="btn" id="lostpwdbtn" type="submit" value="" onClick="forgotPassword()" tabindex="401">Recover</button>
        </div>
    </div>                  
 </form-login>

Answer 1

The form has not yet rendered as the click event is fired. And there are no plans to add such events to Bootstrap dropdowns.

A quick way around this is:

$("#loginlnk").on('click', function(){
    console.log("FIRE");
    var x = setTimeout('$("#j_username").focus()', 700);
});