2

我正在在线将数据输入到我想更改标签顺序但没有使用 Greasemonkey 和 Scriptish 的表单中。我能够删除 -1 的 tabindexes 以使字段可以在 Scriptish 中访问。但是，每当我尝试tabindex在字段上设置时，该字段最终会在选项卡时被跳过。

这可以删除 tabindex：

var eth = document.getElementById('Ethnicities-111');
if (eth)
eth.removeAttribute('tabindex');

这使得不同的文本区域字段不可访问：

var tb = document.getElementById('EybComments');
if (tb)
tb.setAttribute('tabindex' '1');
4

1 回答 1

0

请参阅顺序焦点导航和 tabindex 属性。如果您更改标签顺序，请记住以下几点：

  1. 如果tabindex未设置，则按上述规范中所述的标签顺序自然流动。
  2. 如果 2 个元素具有相同tabindex的 ，则在该值内时将使用自然顺序tabindex（参见下面的演示）。
  3. 如果tabindex是负数，浏览器通常不会允许该节点被标签，但浏览器不必遵守这个规则。
  4. 如果tabindex被删除，那么最后使用的 tab 顺序可能仍然适用（Firefox 等），而不是自然顺序。
    请参阅下面的演示。

这意味着这还不够removeAttribute('tabindex')——特别是如果它被设置为 -1！您必须设置正值，并且考虑到周围的节点和所需的 taborder，正值应该是有意义的。

下面的演示展示了各种tabindex 更改的效果。
请特别注意“自然”顺序如何根据之前的tabindex值在清除之前发生变化。

按下面的“运行代码片段”按钮。

$("#startInp").focus ();

$("button").click ( function (zEvent) {
    $("#startInp")  .focus ();
    var targNodes   = $("td > label > input");
    targNodes.removeProp ("tabindex");
    $("#endInp")    .prop ("tabindex", "7")
                    .prev ("span").text ('Normal next in tab (ti=7)')
                    ;

    switch (zEvent.target.id) {
        case "btnUseNatural":
            targNodes.prev ("span").text ("tabindex not set");
            $("#endInp")    .prop ("tabindex", "2")
                            .prev ("span").text ('Normal next in tab (ti=2)')
                            ;
            break;

        case "btnUseSequential":
            targNodes.each ( function () {
                var jThis   = $(this);
                var tabIdx  = jThis.data ("tabidx");
                jThis.prop ("tabindex", tabIdx);
                jThis.prev ("span").text ('tabindex = ' + tabIdx);
            } );
            break;

        case "btnUseSawtooth":
            targNodes.each ( function () {
                var jThis       = $(this);
                var tabIdx      = jThis.data ("tabidx") + "";
                var newTabIdx   = 0;

                switch (tabIdx) {
                    case "1":   newTabIdx = 1;  break;
                    case "2":   newTabIdx = 3;  break;
                    case "3":   newTabIdx = 5;  break;
                    case "4":   newTabIdx = 2;  break;
                    case "5":   newTabIdx = 4;  break;
                    case "6":   newTabIdx = 6;  break;
                    case "-1":  newTabIdx = -1; break;
                }
                jThis.prop ("tabindex", newTabIdx);
                jThis.prev ("span").text ('tabindex = ' + newTabIdx);
            } );
            break;

        case "btnUseAllOnes":
        case "btnUseAllEights":
            var tabIdx      = zEvent.target.id == "btnUseAllOnes"  ?  "1"  :  "8";
            targNodes.prop ("tabindex", tabIdx);
            targNodes.prev ("span").text ('tabindex = ' + tabIdx);

            $('input[data-tabidx="-1"]').prop ("tabindex", "-1")
            .prev ("span").text ("tabindex = -1");
            ;
            break;
    }
} );
div   { margin: -2ex auto 2em auto; }
input { margin: auto 2em auto 0.5ex; }
label > span {
    width: 14ex;
    display: inline-block;
    text-align: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<h2>Set tab order to:</h2>
<div>
    <button id="btnUseNatural">Natural</button>
    <button id="btnUseSequential">Sequential</button>
    <button id="btnUseSawtooth">Sawtooth</button>
    <button id="btnUseAllOnes">All Ones</button>
    <button id="btnUseAllEights">All Eights</button>
</div>
<p> Tab around the following nodes to see the effect of tabindex changes.<br>
    <label>Start here  (ti=1):<input id="startInp" type="text" tabindex="1"></label>
</p>
<table>
    <tr>
        <td><label><span>tabindex not set</span>:<input data-tabidx="1" type="text"></label></td>
        <td><label><span>tabindex not set</span>:<input data-tabidx="2" type="text"></label></td>
        <td><label><span>tabindex not set</span>:<input data-tabidx="3" type="text"></label></td>
    </tr>
    <tr>
        <td><label><span>tabindex = -1</span>:<input data-tabidx="-1" tabindex="-1" type="text"></label></td>
        <td colspan="2"><=== Will almost always be skipped</td>
    </tr>
    <tr>
        <td><label><span>tabindex not set</span>:<input data-tabidx="4" type="text"></label></td>
        <td><label><span>tabindex not set</span>:<input data-tabidx="5" type="text"></label></td>
        <td><label><span>tabindex not set</span>:<input data-tabidx="6" type="text"></label></td>
    </tr>
</table>
<p>
    <label><span>Normal next in tab (ti=2)</span>:<input id="endInp" type="text" tabindex="2"></label>
</p>

于 2015-09-26T02:41:48.693 回答