Настройка tabindex с использованием usercript?

Question

Я работаю, вводя данные онлайн в форму, в которой я хотел бы изменить порядок табуляции, но мне не повезло с использованием Greasemonkey и Scriptish. Я могу удалить tabindexes -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');

Answer 1

См. Навигация последовательного фокуса и атрибут tabindex. Если вы меняете порядок вкладок, помните следующее:

1. Если tabindex не установлен, то порядок табуляции течет естественным образом, как описано в приведенной выше спецификации.
2. Если 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>