Question

我在网上输入数据到我希望更改Tab键顺序的表单，但是使用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');

Answer 1

见Sequential focus navigation and the tabindex attribute。如果您更改Tab键顺序，请记住以下几点：

如果未设置tabindex，则标签顺序会自然流动，如上述规范中所述。
如果2个元素具有相同的tabindex，则在tabindex值范围内将使用自然顺序（请参阅下面的演示）。
如果tabindex为否定，则浏览器通常不会允许该节点标记为，但浏览器不必遵守此规则。
如果删除了tabindex，则最后使用的标签顺序可能仍然适用（Firefox等），而不是自然顺序。
请参阅下面的演示。

这意味着removeAttribute('tabindex')是不够的 - 特别是如果设置为-1！您必须设置正值，并且在给定周围节点和所需的Taborder的情况下，正值应该是有意义的。

以下演示显示了各种类型的tabindex 更改的效果。
特别注意＆＃34; natural＆＃34;在清除之前，会根据之前的tabindex值对订单进行更改。

按＆＃34;运行代码段＆＃34;按钮，下面。

＆＃13;

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

＆＃13;

div   { margin: -2ex auto 2em auto; }
input { margin: auto 2em auto 0.5ex; }
label > span {
    width: 14ex;
    display: inline-block;
    text-align: right;
}

＆＃13;

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

＆＃13;

使用用户脚本设置tabindex？

1 个答案: