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

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

快速解决这个问题的方法是：

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

Answer 2

您可以将shown事件与下拉标识accessdropdown一起使用，并输入文本框ID inputEmail，如下所示：

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

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

})

Answer 3

更通用一点：

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

然后正常使用下拉列表中autofocus元素的input属性。

Twitter引导程序下拉输入字段未获得使用focus（）方法

3 个答案: