如何从 tabindex 流中删除浏览器功能？答案

【问题标题】：How to remove browsers functions from tabindex flow?如何从 tabindex 流中删除浏览器功能？
【发布时间】：2015-11-27 06:32:38
【问题描述】：

我已经在我的 JSP 页面中的所有元素上设置了标签索引，这工作正常，但在标签索引流中，浏览器的功能也得到了关注。

示例：当标签焦点位于页面的最后一个元素时，如果我再次点击标签，则焦点将转到浏览器的地址栏、刷新按钮、标签窗口和主页按钮。

我希望焦点应该放在最后一个标签索引为 10 之后标签索引为 1 的第一个元素。

如何限制这些浏览器功能的标签焦点。我正在使用 Javascript/JQuery 和 IE 9。

以下是我的页面：

<html>
    <body>
        <script src="jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                //functions
            });
        </script>
        <div id="xyz">
            <ul >
                <li>
                    <div>
                        <input type="text" maxlength="30" tabindex = "1" />
                        <br>
                        <input type="text" maxlength="30" tabindex = "2" />
                        <br>
                    </div>
                </li>
            </ul>
            <ul>
                <li>
                    <div>
                        <input type="checkbox" id="checkBox1" value="false" tabindex ="3"/>
                    </div>
                    <div>
                        <input type="checkbox" id="checkBox2" value="false" tabindex ="4"/>
                    </div>
                </li>
                <li>
                    <div>
                        <input type="button" name="saveBtn" id="saveBtn" value="SaveMe" tabindex ="5"/>
                    </div>
                    <div>
                        <input type="button" name="clearBtn" id="clearBtn" value="ClearMe" tabindex ="6"/>
                    </div>
                </li>
            </ul>
        </div>
    </body>
</html>

【问题讨论】：

这取决于你的标记结构。
将blur 事件附加到您的最后一个表单元素，并将焦点设置到您的第一个/必需的表单元素。我相信它会起作用。

标签： javascript jquery internet-explorer browser tabindex

【解决方案1】：

如果当前焦点是最后一个元素，您可以使用下面的脚本来聚焦第一个元素。

<input id="firstElement" value="" />
<!---series of dom element-->
<input id="lastElement" value="" />
<script>
   $('#lastElement').keydown(function(e) {
      if (e.keyCode == 9) {
          $('#firstElement').focus();
          e.preventDefault();
      }
   });

</script>

【讨论】：

【解决方案2】：

您可以将keydown 事件与.index() 和.length 结合使用检查：

$('#xyz').find(':input').last().keydown(function(e) {
  if ($(this).attr('tabindex') == $('#xyz').find(':input').length) {
    if (e.keyCode === 9) {
      e.preventDefault();
      $('input[type="text"]').first().trigger('focus');
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="xyz">
  <ul>
    <li>
      <div>
        <input type="text" maxlength="30" tabindex="1" />
        <br>
        <input type="text" maxlength="30" tabindex="2" />
        <br>
      </div>
    </li>
  </ul>
  <ul>
    <li>
      <div>
        <input type="checkbox" id="checkBox1" value="false" tabindex="3" />
      </div>
      <div>
        <input type="checkbox" id="checkBox2" value="false" tabindex="4" />
      </div>
    </li>
    <li>
      <div>
        <input type="button" name="saveBtn" id="saveBtn" value="SaveMe" tabindex="5" />
      </div>
      <div>
        <input type="button" name="clearBtn" id="clearBtn" value="ClearMe" tabindex="6" />
      </div>
    </li>
  </ul>
</div>

【讨论】：