使用userscript设置tabindex

Setting tabindex using a userscript?

本文关键字：tabindex 设置 userscript 使用      更新时间：2023-09-26

我工作在线输入数据到一个表单，我想改变选项卡顺序，但没有运气使用Greasemonkey和Scriptish。我能够删除表索引-1，使字段在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');

参见顺序焦点导航和tabindex属性。如果更改制表符顺序，请记住以下几点:

  1. 如果未设置tabindex，则制表符顺序自然按照上述规范进行。
  2. 如果两个元素具有相同的tabindex，则在tabindex值内将使用自然顺序(参见下面的演示)。
  3. 如果tabindex是负的，浏览器通常不允许该节点被选项卡，但是浏览器不必遵守此规则。
  4. 如果删除tabindex，则最后使用的选项卡顺序可能仍然适用(Firefox等)，而不是自然顺序。
    请看下面的演示:

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

下面的演示展示了不同类型的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>

相关文章：