Question

我想将注意力锁定在TAB键按下。所以它应该保留在我的Dialog中，直到我点击关闭按钮。我的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键然后焦点移动到我的背页的输入元素。这意味着焦点不在那个对话框之外。如何将焦点锁定在对话框中，以便在对话框关闭之前不会移动到对话框

Answer 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
    }
});
});

Answer 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 keypress，如果在集合的最后一项上按下它，它将转到第一个。

为此创建了一个github存储库。如果您对此做了任何工作，您也可以提交它＆gt;＆gt; https://github.com/Gottwik/jquery-tabloop

Answer 3

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

https://jsfiddle.net/k5a21wk2/

我基本上捕捉了对话框中最后一个元素的标签按下并将其重点放在其中的第一个元素上。

另外，我不认为你必须为close()＆amp; {}提供tabindex="-1"。 div，因为默认情况下它们不可调焦。

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

3 个答案: