强迫；标签"；单击以在元素内移动-Jquery/Javascript_Javascript_Jquery_Html

强迫；标签"；单击以在元素内移动-Jquery/Javascript

javascript jquery html

强迫；标签"；单击以在元素内移动-Jquery/Javascript,javascript,jquery,html,Javascript,Jquery,Html,我已经创建了一个具有“dialog”类型角色的div，我想将焦点锁定在对话框内的Tab键上。该对话框中已添加“关闭”按钮。当前，只要对话框打开我的焦点出现在第一个输入按钮上，然后按TAB键，我的焦点移动到对话框内的关闭按钮现在，当我第三次按TAB键时，焦点移动到我的主页的输入元素。这意味着焦点在对话之外如何将焦点锁定在对话框内部，以便在关闭对话框之前不会移动到对话框外部。是否需要设置我的主页输入元素的tabindex=“-1”，以便当对话框反映在屏幕上时，我们按TAB键时焦点不会移动关

我已经创建了一个具有“dialog”类型角色的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>

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

我不认为你能从一个输入字段中去掉焦点。但你可以监听tab键并控制这种行为。（我猜哪一个是关闭按钮，如果我错了，请切换它们。）

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

我在我的JS中添加了如下解决方案：$（函数（）{$（“#确认层完成检查按钮”）.keydown（函数（e）{if（e.which==9）{e.preventDefault（）；$（“#确认层点击按钮”）.focus（）}}）；但它不起作用。我可以从中删除函数吗？是的，保持原样。或者可能将其放入$（document.ready（function（）{}）；，我在我的JS中添加了如下解决方案：$（函数（）{$（“#确认层完成检查按钮”）.keydown（函数（e）{if（e.which==9）{e.preventDefault（）；$（“#确认层点击按钮”）.focus（）；}）；但它不起作用。我可以从中删除函数吗？是的，保持原样。或者可能将其放入$（document.ready（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
    }
});

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