使用userscript设置tabindex？

Question

我的工作是在网上输入数据到一个我想改变跳转顺序的表单中，但使用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

参见。如果更改Tab键顺序，请记住以下几点：

1. 如果未设置tabindex，则Tab键顺序将按照上述规范中的说明自然流动。
2. 如果两个元素具有相同的tabindex，则在该代码值内时将使用自然顺序(请参阅下面的演示)。
3. 如果< tabindex >D10tabindex>为负值，浏览器通常不允许使用Tab键切换到该节点，但浏览器不必遵守删除此代码的<

>E118，则最后使用的Tab键顺序可能仍然适用(火狐等)。而不是自然的顺序。

请参阅下面的演示。

这意味着removeAttribute('tabindex')是不够的--特别是当它被设置为-1的时候！您必须设置正值，并且给定周围的节点和所需的the顺序，这些正值应该是有意义的。

下面的演示展示了各种类型的tabindex changes的效果。

特别要注意的是，在清除之前，如何根据先前的tabindex 来更改“自然”的顺序。

点击下面的"Run code snippet“按钮。

​

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

​