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

【问题标题】：How to lock focus in a Dialog?如何在对话框中锁定焦点？
【发布时间】：2015-07-17 06:23:33
【问题描述】：

我想将焦点锁定在 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，我想将焦点锁定在对话框内的 Tab 键上。该对话框中已经添加了关闭按钮。目前，一旦对话框打开，我的焦点就会出现在第一个输入按钮上，然后在 TAB 键上按下我的焦点会移动到该对话框内的关闭按钮。现在，当我第三次按 TAB 键时，焦点将移动到我的后页的输入元素。这意味着焦点出现在该对话框之外。如何将焦点锁定在对话框内，以便在关闭对话框之前它不会移出它

【问题讨论】：

请更准确地定义“不工作”
@André Schild 我已经编辑了解释。请立即检查问题。
在声明对话的时候加上modal: true不就解决了吗？

标签： javascript jquery

【解决方案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
    }
});
});

【讨论】：

【解决方案2】：

多么有趣的问题。我创建了一个小型 jquery 插件 - 请参阅 jsfiddle：https://jsfiddle.net/chs7x8vh/

$.fn.tabloop = function() {
    var p = {
        collection: this
    };    
    $(this).keydown(p, function(e) {
        if($(e.currentTarget)[0] == e.data.collection.last()[0]){
            e.data.collection.first().focus();
            e.preventDefault();
        }
    })
};

$(".tabloop1").tabloop();

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

为此创建了一个 github 存储库。如果你在这方面做了任何工作，你不妨提交它>>https://github.com/Gottwik/jquery-tabloop

【讨论】：

【解决方案3】：

我在您已经做过的基础上创建了一个简单的示例，并且它有效。不完全确定为什么它不适合你。

https://jsfiddle.net/k5a21wk2/

我基本上是在对话框中的最后一个元素上捕获标签按下并将其重新聚焦在其中的第一个元素上。

另外，我认为您不必为 div 和 h2 提供 tabindex="-1"，因为它们默认情况下不可聚焦。

【讨论】：