焦点离开弹出页面到父页面答案

【问题标题】：Focus going out of the popup page to the parent page焦点离开弹出页面到父页面
【发布时间】：2014-07-30 19:54:08
【问题描述】：

我在点击登录按钮时加载了一个弹出页面。问题是当我一直按标签时，焦点会转到父页面。我希望焦点一直在按选项卡上的弹出窗口上循环，直到它关闭

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>

【问题讨论】：

使用 jquery 捕获选项卡，当它即将从子页面的最后一个元素离开时停止传播并防止默认并将焦点放在子页面中的第一个元素

标签： javascript css

【解决方案1】：

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

您可以在 JSfiddle 中看到它的工作原理（需要正确设置 tabindexes）。

我为按钮添加了一个 ID 以便轻松找到它，然后将其添加到点击函数中：

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

【讨论】：