html4中的自定義鍵盤選項卡順序

Question

我想管理鍵盤選項卡順序功能，我使用了一個用於存在許多錨點元素&輸入元素的頁眉，頁腳和側欄的模板。在模板內容中，我們不能放置並且不屬於我的控制範圍的tabindex屬性。模板的

中間部分是我的工作區，在這裏我創建了一個表格，有些元素

<fieldset id="myWorkArea"> 
    <div class="fieldrow"> 
     <label for="input1">Class</label> 
     <input id="input1"/> 
     <a id="help1" href="#">what's this?</a> 
    </div> 
    <div class="fieldrow"> 
     <label for="input2">Class</label> 
     <input id="input2"/> 
     <a id="help2" href="#">what's this?</a> 
    </div> 
</fieldset> 

在上面的代碼中，我想光標下方ID順序跳格英寸

#help1 > #input1 
#help2 > #input2 

是任何方法來控制只#myWorkArea字段集元素鍵盤Tab鍵順序，因爲我們不能把tabindex屬性在頁面中所有元素？

Answer 1

即使您無權訪問模板，仍可以編程方式添加tabindex屬性。

這裏有一個片段：

var tabindex = 1; 
 

 
$('#myWorkArea .fieldrow').each(function() { 
 
\t $('a', this).attr('tabindex', tabindex++); 
 
\t $('input', this).attr('tabindex', tabindex++); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<fieldset id="myWorkArea"> 
 
    <div class="fieldrow"> 
 
     <label for="input1">Class</label> 
 
     <input id="input1"/> 
 
     <a id="help1" href="#">what's this?</a> 
 
    </div> 
 
    <div class="fieldrow"> 
 
     <label for="input2">Class</label> 
 
     <input id="input2"/> 
 
     <a id="help2" href="#">what's this?</a> 
 
    </div> 
 
</fieldset>

希望它能幫助！

Answer 2

您可以使用JavaScript以編程方式添加選項卡索引，如David在答案中所述。

或者如果你想要的話，你可以通過將你自己的事件綁定到下面的代碼這些元素來控制taborder的功能。

工作FIDDLE

$(function(){ 
    var inputs = $('a#help1, a#help2,input#input1, input#input2'); 
      $(inputs).bind('keydown', function (e) {  
       var self = $(this), form = self.parents('form:eq(0)'), focusable, next; 
      //check keycode for tabbing  
      if (e.keyCode == 9) { 
        switch($(this).attr("id")){      
         case "help1": 
          next=$('#input1'); 
          break; 
          case "help2": 
          next=$('#input2'); 
          break; 
          case "input1": 
          next=$('#help2'); 
          break; 
          case "input2": 
          next=$('#help1'); 
          break; 
          }      
        next.focus(); 
        e.preventDefault(); 
        return false; 
       } 
      }); 
});