Question

我在点击按钮点击时加载了一个弹出页面。问题是当我一直按下标签时，焦点将转移到父页面。我希望焦点在按下按钮上的弹出窗口继续循环直到它关闭

HTML代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="Css/bootstrap.min.css" rel="stylesheet" />
    <link href="Css/bootstrap.css" rel="stylesheet" />
    <script src="Scripts/jquery.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <script src="Scripts/jquery.bpopup.min.js"></script>
    <link href="Css/style.css" rel="stylesheet" />
</head>
<body>
    <div class="container-fluid">
        <div class="row header">
            <div class="col-md-6 col-md-offset-3">
                <div class="row">
                    <div class="col-md-4">
                        <img src="Css/Images/Logo.png" />
                    </div>
                    <div class="col-md-8 quickbuttons">
                        <button type="button" class="btn btn-link" tabindex="1" id="btnSignin"><span class="glyphicon glyphicon-user"></span> Sign in</button>
                        <button type="button" class="btn btn-link" tabindex="2"><span class="glyphicon glyphicon-info-sign"></span> Help</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <h3 style="margin-top:50px;">Signup</h3>
                <form class="form">
                    <div class="form-group">
                        <label class="sr-only" for="txtFirstName">First Name</label>
                        <input type="text" name="First Name" value="" id="txtFirstName" class="form-control" placeholder="First Name" required="" tabindex="3" />
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="txtLastName">Last Name</label>
                        <input type="text" name="Last Name" value="" id="txtLastName" class="form-control" placeholder="Last Name" required="" tabindex="4" />
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="txtEmailId">Email Id</label>
                        <input type="email" name="Email ID" value="" id="txtEmailId" class="form-control" placeholder="example@yahoo.com" required="" tabindex="5" />
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="txtPassword">Password</label>
                        <input type="password" name="Password" value="" id="txtPassword" class="form-control" placeholder="Password" required="" tabindex="6" />
                    </div>
                    <button class="btn btn-primary pull-right" tabindex="7" id="btnSingUp"><span class="glyphicon glyphicon-plus"></span> Sign Up</button>
                </form>
            </div>
        </div>
        <div id="element_to_pop_up">
            <a class="b-close">
                X
                <br />
            </a>
            <h3>Login</h3>
            <form class="form">
                <div class="form-group">
                    <label class="sr-only" for="txtLoginEmailId">Email Id</label>
                    <input type="email" name="Email ID" value="" id="txtLoginEmailId" class="form-control" placeholder="example@yahoo.com" required="" tabindex="1" />
                </div>
                <div class="form-group">
                    <label class="sr-only" for="txtLoginPassword">Password</label>
                    <input type="password" name="Password" value="" id="txtLoginPassword" class="form-control" placeholder="Password" required="" tabindex="2" />
                </div>
                <button class="btn btn-primary pull-right" tabindex="3"><span class="glyphicon glyphicon-off"></span> Sign In</button>
            </form>
        </div>
    </div>
    <script>
        $("#btnSignin").click(function () {
            $('#element_to_pop_up').bPopup();
        });
    </script>
</body>
</html>

Answer 1

您可以捕捉弹出窗口中最后一个可聚焦项目的focusOut事件，当发生这种情况时，只需将焦点发送到弹出窗口中的第一个可聚焦元素。

您可以在此JSfiddle中看到它正常工作（需要设置右侧标签）。

我在按钮上添加了一个ID以便轻松找到它，然后将其添加到click功能中：

$('#signin-button').focusout(function() {$(this).closest('form').find('input').first().focus();});

将焦点从弹出页面转移到父页面

1 个答案: