使用userscript设置tabindex？

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。如果您更改标签订单，请记住以下几点：

1. 如果没有设置tabindex，则Tab键顺序自然流动，如上述规格中所述。
2. 如果2个元素具有相同的tabindex，自然顺序将被使用时tabindex值内（见下面的演示）。
3. 如果tabindex为负数，浏览器通常不会允许该节点被标记为，但浏览器不必遵守该规则。
4. 如果删除了tabindex，则上次使用的Tab键顺序可能仍然适用（Firefox等），而不是自然顺序。
   请参阅下面的演示。

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

下面的演示展示了各种类型的tabindex的影响改变。
尤其注意如何“自然”为了基于以前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>