Question

我使用bootstrap 3.3.6创建网站。在这个网站上我有一个登录表单，一旦用户点击它上面的登录按钮就会显示（此部分已经在工作）。

现在我想实现这一点，一旦用户点击顶部的按钮并显示登录表单，焦点将被设置为用户名的输入字段。

将焦点设置在最初隐藏的输入字段上似乎是一个问题，所以即使我没有显示，我也在寻找一种方法来实现它。 ;我知道如何拦截bootstrap的javascript。

我已经尝试过的事情是：

$(".dropdown-toggle").click(function () {
    var sender = this.id;

    if(sender == "btnLogin")
    {
        $("#loginEmail").focus();
    }
});

但由于上面提到的可见性问题，它没有用。

编辑20.1.2017,12：38 - 根据要求添加了HTML代码

    <div class="user_login_content">
    <!--### Begin Header -> Navigation Top Right -> Login -> Login Form ###-->
    <div id="divLogin"
         data-bind="visible:!isAuthenticated()"
         data-default-submit-control-id="btnLogin" 
         style="display:none;">

        <div class="form-group">
            <input id="loginEmail" 
       name="loginEmail" 
       data-bind="value:email" 
       type="text" 
       class="form-control" 
       placeholder="Username or Email" />
        </div>
        <div class="form-group">
            <input id="loginPassword" 
       name="loginPassword" 
       data-bind="value:password" 
       type="password" 
       class="form-control" 
       placeholder="Password" />
        </div>
        <div class="form-group">
            <input data-bind="value:saveLogin" id="chbSaveLogin" type="checkbox" />
            <label for="chbSaveLogin"><span></span>Remember me</label>
        </div>

        <div class="form-group">
            <button id="btnLogin" data-bind="click:loginClick" type="button" class="button_ti">
    Login
            </button>
        </div>

        <div class="form-group" data-bind="visible:loginErrorMessage" style="display: none">
            <p class="error" data-bind="text:loginErrorMessage"></p>
        </div>

        <a href="NewAccountUrl"
           target="_blank"
           title="New Account">
            New Account
        </a><br />

        <a id="hlForgotPassword">
            Forgot Password
        </a>
    </div>
    <!--### End Header -> Navigation Top Right -> Login -> Login Form ###-->
</div>

Answer 1

你在尝试这样的事吗

<input type="button" value="click">
<input type="text" id="user" style="display:none">

$('input[type="button"]').click(function(){
    $('#user').show()
    $('#user').focus();
})

Answer 2

确保您的按钮具有您在选择器（btnLogin）中提到的ID并尝试按照

$(".dropdown-toggle").click(function (e) {
    var sender = $(this).attr("id"); OR e.target.id

    if(sender == "btnLogin")
    {
        $("#loginEmail").focus();
        // OR try setTimeout(function() { $("#loginEmail").focus(); }, 2000);

    }
});

Answer 3

使用以下代码解决：

$('.user_login').on('shown.bs.dropdown', function (e) {

    var sender = "#" + e.relatedTarget.id;

    if(sender == "#btnLogin")
    {
        $("#loginEmail").focus();
    }
});

引用http://getbootstrap.com/javascript/#dropdowns-events

show.bs.dropdown是下拉菜单对用户可见时触发的事件

所有下拉事件都有一个relatedTarget属性，其值为切换的锚元素。

如何使用bootstrap显示隐藏文本框后的焦点

3 个答案: