HTML网页中的标签移动需要什么答案

【问题标题】：What is necessary for Tab Movement in HTML webpageHTML网页中的标签移动需要什么
【发布时间】：2016-12-08 04:38:28
【问题描述】：

我只是想知道在网页中保持标签移动需要什么，以便像 Tab 和 Tab+shift 功能这样的键应该在任何地方都可以工作。

在基于 Div 的 html 和基于表的 html 中都可以工作，但是当包含标签时，此功能在 mozilla 中停止工作。我尝试使用tabindex，但它不起作用。

<h3>Div</h3> 
<div><input type="text" name="text1"></div>
<div><input type="text" name="text1"></div>
<div><input type="text" name="text1"></div>
<div><input type="text" name="text1"></div>
<div><input type="text" name="text1"></div>
<div><input type="text" name="text1"></div>
<div><input type="text" name="text1"></div>
<div><input type="text" name="text1"></div>

<h3>Table</h3>

<table>
  <tr>
    <td><input type="text" name="text1"></td>
  </tr>
  <tr>
    <td><input type="text" name="text1"></td>
  </tr>
  <tr>
    <td><input type="text" name="text1"></td>
  </tr>
  <tr>
    <td><input type="text" name="text1"></td>
  </tr>
  <tr>
    <td><input type="text" name="text1"></td>
  </tr>
  <tr>
    <td><input type="text" name="text1"></td>
  </tr>
</table>

【问题讨论】：

标签： jquery html tabs

【解决方案1】：

我从question1 和question2 这两个问题中得到帮助，并构建了一个有助于标签移动的脚本。

这是我的代码。不需要标签移动的页面。

<script> var notabmovement = true;</script>

在这个脚本之前。

if (typeof notabmovement === 'undefined' || !notabmovement) {
            //Tab Movement //TAB & TAB+SHIFT
            $("body").on('change', function () {
                $(":input:not([type=hidden]):visible").each(function (i) {
                    $(this).attr('tabindex', i + 1);
                });
            });
            $("body").on('click', function () {
                $(":input:not([type=hidden]):visible").each(function (i) {
                    $(this).attr('tabindex', i + 1);
                });
            });
            $(":input:not([type=hidden]):visible").each(function (i) {
                $(this).attr('tabindex', i + 1);
            });
            $(':input').on('keydown', function (e) {
                var keyCode = e.keyCode || e.which;
                if (keyCode == 9) {
                    if (e.shiftKey) {
                        tindex = parseInt($(this).attr("tabindex")) - 1;
                        if ($(":input[tabindex='" + tindex + "']"))
                        {
                            $(":input[tabindex='" + tindex + "']").focus();
                        }
                    } else {
                        tindex = parseInt($(this).attr("tabindex")) + 1;
                        if ($(":input[tabindex='" + tindex + "']"))
                        {
                            $(":input[tabindex='" + tindex + "']").focus();
                        }
                    }
                    return false;
                }                   
           });

}

现在您可以使用tab 和shift + tab

【讨论】：