Twitter引导下拉输入字段无法使用focus（）方法

Question

我在登录下拉列表中的第一个输入字段上获得焦点时遇到问题。 我正在使用 jquery 1.7.2 和 bootstrap 2.1.1，只有模式和下拉功能。 它们都很好用，我通过数据目标而不是 JS 调用下拉菜单和模式。

我已经尝试了几个小时并到处寻找答案，但我找不到让我的第一个输入字段 (#j_username) 在显示下拉菜单时获得焦点的方法。

bootstrap 中显示的事件不会触发，所以我做了一个 jQuery on() 事件，它触发得很好。 我的选择器工作正常，我已经在控制台中使用其他方法（hide() 和 show() 以及选择同一字段的各种方法（它的 id #j_username）或 ($("#fields input:first ")。

事件正确触发，但无法让输入字段获得焦点。 我已经尝试过 HTML5 的自动对焦属性，但它似乎也不起作用。

有什么想法吗？提前致谢

处理程序是函数 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

更通用一点：

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

然后像往常一样在下拉列表中的input 元素上使用autofocus 属性。

Answer 2

您可以使用shown 事件和下拉ID accessdropdown 并输入文本框ID inputEmail，如下所示：

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

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

})

Answer 3

在触发点击事件时，表单尚未呈现。还有no plans to add such events to Bootstrap dropdowns。

解决此问题的快速方法是：

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