10

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

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

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

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

有任何想法吗？提前致谢

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

4

3 回答 3

11

触发 click 事件时，表单尚未呈现。并且没有计划将此类事件添加到 Bootstrap 下拉菜单。

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

$("#loginlnk").on('click', function(){
    console.log("FIRE");
    var x = setTimeout('$("#j_username").focus()', 700);
});
于 2012-10-20T16:05:30.777 回答
4

您可以使用shown带有下拉 idaccessdropdown和输入文本框 id的事件inputEmail，如下所示：

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

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

})
于 2015-06-02T10:14:07.793 回答
1

更通用一点：

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

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

于 2018-06-14T10:55:37.547 回答