如何從tabindex流中刪除瀏覽器功能？

Question

我已經在我的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>

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

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

如何從tabindex流中刪除瀏覽器功能？

問題描述

2 個解決方案

解決方案1
2 已采納 2015-11-27 06:57:31

解決方案2
1 2015-11-27 06:59:18

如何從tabindex流中刪除瀏覽器功能？

問題描述

2 個解決方案

解決方案1 2 已采納 2015-11-27 06:57:31

解決方案2 1 2015-11-27 06:59:18

解決方案1
2 已采納 2015-11-27 06:57:31

解決方案2
1 2015-11-27 06:59:18