Javascript 如何在对话框中锁定焦点？

我想将焦点锁定在按TAB键上。所以它应该一直在我的对话框中，直到我点击关闭按钮。下面提到了我的JS代码，但它不起作用。谁能帮我修一下吗

$(function () {
    $("#confirmSubmit").keydown(function(e){
    if (e.which == 9 ) { //keycode for TAB
        e.preventDefault(); //stops the default behavior of moving focus to the back page
        $("#confirm").focus(); //moves focus to your first input button
    }
});
});

对话框的代码：

// code for dialog
    <div style="display: none">
    <div aria-live="assertive" aria-describedby="Contentdiv" 
    role="dialog" id="completeReservationMain" >
                <div tabindex="-1"  id="Contentdiv">

                    <div  id="CompleteReservationContent"> 


                        <h2 tabindex="-1" class="help-layer-heading"> 

                           Print   </h2>


                        <div tabindex="-1" class="check-in-complete-help">
                            Are you sure to Submit?
                        </div>
                        <div class="center">
                            <span class="Button" id="Span1"><span class="ButtonInner">
                                <form method="get" target="_blank" action="/Print.aspx">
                                <input type="submit"  id="confirm" value="Print">
                                </form>
                            </span></span><span class="Button " id="Span2">
                                <span class="ButtonInner">
                                    <input type="submit" title="Submit" id="confirmSubmit" value="Continue Submit">  
                                </span></span>

                        </div>
                    </div>

                   </div>

//对话框的代码
印刷品
你确定要提交吗？

主要问题描述：我创建了一个div，其角色为“dialog”类型。我想将焦点锁定在对话框内的Tab键上。该对话框中已添加“关闭”按钮。当前，只要对话框打开，我的焦点就会出现在第一个输入按钮上，然后按TAB键，我的焦点就会移动到对话框内的关闭按钮。 现在，当我第三次按TAB键时，焦点移动到我的主页的输入元素。这意味着焦点在对话之外。

---

如何将焦点锁定在对话框内部，以便在关闭对话框之前不会移动到对话框外部

这是一个多么有趣的问题。我创建了一个小小的jquery插件-请参见JSFIDLE：

基本上，它劫持了tab键，如果按下集合的最后一项，它将转到第一项

---

为此创建了github存储库。如果您在这方面做了任何工作，您也可以提交它>>

我在您已经做的基础上创建了一个简单的示例，它可以正常工作。但我不太清楚为什么不适合你

我基本上捕获了对话框中最后一个元素上的制表键，并将其重新聚焦到对话框中的第一个元素上

---

此外，我认为您不必为

div

&

h2

提供

tabindex=“-1”

，因为它们在默认情况下是不可聚焦的。

最后，同样的代码适用于我：

$(function () {
    $("#confirmSubmit").keydown(function(e){
    if (e.which == 9 ) { //keycode for TAB
        e.preventDefault(); //stops the default behavior of moving focus to the back page
        $("#confirm").focus(); //moves focus to your first input button
    }
});
});

---

请更详细地定义“不工作”precisely@Andr我已经编辑了解释。现在请检查问题。在声明对话时添加

modal:true

不是解决了这个问题吗？

$(function () {
    $("#confirmSubmit").keydown(function(e){
    if (e.which == 9 ) { //keycode for TAB
        e.preventDefault(); //stops the default behavior of moving focus to the back page
        $("#confirm").focus(); //moves focus to your first input button
    }
});
});