使用用戶腳本設置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

請參閱順序焦點導航和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>