Question

我创建了一个div，其角色为＆＃34; dialog＆＃34; type我希望将焦点锁定在对话框内的Tab键按下。该对话框中已添加“关闭”按钮。目前只要对话框打开我的焦点出现在第一个输入按钮上，然后在TAB键上按下我的焦点移动到该对话框内的关闭按钮。
现在我第三次按TAB键然后焦点移动到我的后页输入元素。这意味着焦点不在那个对话框之外。
如何在对话框中锁定焦点，以便在对话框关闭之前不会移动到对话框之外。无论如何设置我的后页的输入元素的tabindex="-1"所以当Dialog反映在屏幕上并按TAB键时焦点不移动关于那些元素。我的HTML代码如下所述。它会给你一个粗略的想法。

// 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>

现在下面提到的代码属于我的普通HTML页面，我有按钮，当我点击它时会打开对话框：

 <body>

 <div class="topMenu" id="main">

        <div title="Home" >
            <a href="/Home.aspx" id="home"> Home  </a>
              </div>    

        <div title="Services" >
            <a href="/Services.aspx" id="services"> Services  </a>
              </div> 

              <div title="Contact" >
            <a href="/Contact.aspx" id="home"> Contact </a>
              </div> 
 </div>
  <div class="print-contract">
  <form action="https://example1.com">
            <div class="button">

                    <input value="Print" type="submit" id="print" title="Print" />
            </div>
            </form>

            <form action="https://example2.com">
            <div class="button">

                    <input value="Complete Reservation" type="submit" id="completeReservation" title="Complete Reservation" />
            </div>
            </form>
            </div>

            </body>

Answer 1

我认为您无法从输入字段中删除可聚焦性。但是你可以监听tab按键并控制这种行为。（我猜到哪一个是关闭按钮，如果我错了就转换它们。）

$("#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

每次按标签时，无论对焦元素是否在对话框容器内，都可以进行检查。如果没有，那么只关注对话框容器中的第一个元素。

$('body').on('keydown',function(e){
  var dialogHidden = $('#completeReservationMain').parent().is(':hidden');//according to the html code given
   // Also checking if dialog is hidden or not
  if($(':focus').closest('#completeReservationMain').length == 0 && e.which === 9 && dialogHidden === false ){
    // for example on the confirm button
    $('#confirm').focus();
  }
});

Force＆＃34; Tab＆＃34;点击在元素中移动 - Jquery / Javascript

2 个答案: