强制“Tab”点击在元素内移动 - Jquery/Javascript答案

【问题标题】：Force "Tab" clicks to move within an element - Jquery/Javascript强制“Tab”点击在元素内移动 - Jquery/Javascript
【发布时间】：2015-07-16 13:30:59
【问题描述】：

我创建了一个具有“对话框”类型角色的 div，我想将焦点锁定在对话框内的 Tab 键上。该对话框中已经添加了关闭按钮。目前只要对话框打开我的焦点出现在第一个输入按钮上，然后在 TAB 键上按下我的焦点移动到该对话框内的关闭按钮。
现在，当我第三次按 TAB 键时，焦点将移动到我的后页的输入元素。这意味着焦点出现在该对话框之外。
如何将我的焦点锁定在对话框内，以便在关闭对话框之前它不会移出它。无论如何设置我的后页输入元素的tabindex="-1"，所以当对话框反映在屏幕上并且我们按下 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>

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

我认为您不能从输入字段中删除焦点。但是您可以侦听选项卡按键并控制该行为。（我猜哪一个是关闭按钮，如果我错了，请切换它们。）

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

【讨论】：

我在我的 JS 中添加了您的解决方案，如下所示： $(function () { $("#confirmationLayerCompleteCheckInButton").keydown(function (e) { if (e.which == 9) { e.preventDefault(); $("#confirmationLayerPrintButton").focus(); } }); });但它不起作用。我可以从中删除功能吗？？
是的，保持原样。或者可能把它放在你的 $(document).ready(function(){ }); 中，如果你有其中之一的话。

【解决方案2】：

您可以在每次按下 tab 时检查焦点元素是否在 对话框容器内。如果没有，那么只需关注 对话框容器 中的第一个元素。

$('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();
  }
});

【讨论】：