CODEWITHSUNDEEP
jqueryinputtwitter-bootstrap
ficho
ficho

Reputation: 149

Twitter bootstrap dropdown input field not gaining working with focus() method

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>

Upvotes: 10

Views: 6586

Answers (3)

Dunc
Dunc

Reputation: 18922

A bit more generic:

$(document.body).on('shown.bs.dropdown', function () {
    $("[autofocus]", this).focus();
});

Then use the autofocus attribute on input elements on your dropdowns as normal.

Upvotes: 1

holibob
holibob

Reputation: 51

You can use shown event with dropdown id accessdropdown and input text box id inputEmail as follows:

$('#accessdropdown').on('shown.bs.dropdown', function () {

    $("#inputEmail").focus();

})

Upvotes: 4

mccannf
mccannf

Reputation: 16659

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);
});

Upvotes: 11

Related Questions