HTML - 分組tabindexes;在舊版HTML代碼中間的tabindexes

Question

我正在維護一個先進的eform應用程序，其中包含混合的遺留自由文本HTML，我不能輕易修改它。以前一直沒有使用tabindex，它依靠字符流順序。

在頁面的中間，我需要引入包含具有自定義跳位順序輸入，例如一個表：

 
|-----|-----|-----| 
| 1 | 3 | 5 | 
|-----|-----|-----| 
| 2 | 4 | 6 | 
|-----------------| 

該遺留/先前添加輸入的頁面上呈現的方式，我可以實際上是動態/集中地修改它們，以便它們按順序輸出tabindexes。如：

 
[Input, tabindex: 1] 

|-----|-----|-----| 
| 2 | 4 | 6 | 
|-----|-----|-----| 
| 3 | 5 | 7 | 
|-----------------| 

[Input, tabindex: 8] 

但是，當自由文本HTML錨開始展現出來，這不是動態渲染（所以不能輕易tabindex屬性添加到他們，除非我加了不少正則表達式邏輯的）出現的問題。那麼接下來的黏合變成這樣：

 
[Input, tabindex: 1] 

|-----|-----|-----| 
| 2 | 4 | 6 | 
|-----|-----|-----| 
| 3 | 5 | 7 | 
|-----------------| 

[anchor link] 
[Input, tabindex: 8] 

這使得鏈接不能被分頁到。有可能更糟，更高級的這種情況......但我認爲這個問題是可以理解的？

所以我的問題是這樣的 ...它可能以某種方式分配somekind的tabindex屬性組中的意義：

 
[tabgroup1] 
[Input] 
[/tabgroup1] 

[tabgroup2] 
|-----|-----|-----| 
| 1 | 3 | 5 | 
|-----|-----|-----| 
| 2 | 4 | 6 | 
|-----------------| 
[/tabgroup2] 

[tabgroup3] 
[anchor link] 
[Input] 
[/tabgroup3] 

所以我可以有像以前一樣工作tab鍵切換，在跳躍字符流的順序，從輸入到最近的錨，到下一個輸入，等等......但是在[tabgroup2]內部，它將按照tabindexes的順序進行，但是然後繼續進入[tabgroup2]和tab就好像所有元素都有tabindex =「0」

---

我正在尋找的是一些神奇的HTML解決方案（這不太可能）或者一個相對簡單的JavaScript庫，它可能已經實現了這樣的東西。或者，如果這不是真的存在，那麼聽到一些可選的想法或者如果我嘗試實現它，我自己可能的注意事項的想法會很有趣。

Answer 1

好的，我用自己的一些代碼解決了這個問題。產生的JavaScript的是這樣的：

function updateTabIndex() { 
    $('a, area, button, input, object, select, textarea').each(function(i, e) { 
     var element = $(e); 

     var tabIndex = i; 
     if (element.attr('data-tabindexoffset')) { 

      var tabgroup = $(element.closest('[data-tabgroup]')); 
      if (!tabgroup.attr('data-tabindexstart')) { 
       tabgroup.attr('data-tabindexstart', tabIndex); 
      } 

      var tabIndexStart = parseInt(tabgroup.attr('data-tabindexstart')); 
      tabIndex = tabIndexStart + parseInt(element.attr('data-tabindexoffset')); 
     } 

     $(e).attr('tabindex', tabIndex); 
    }); 
} 

$(function() { 
    updateTabIndex(); 
}); 

這使我不使用tabindexes，除了一個已知元素組內的偏移，其中tabindex屬性不會遵循常規字符流順序。它似乎工作得很好，因爲組後的tabindexes總是一樣的;只是其中之間的重新排序。

像這樣的解決方案的唯一問題是，如果有元素添加和從AJAX調用中刪除，那麼所有的索引將需要重新計算，然後。但它應該相當快。

實例HTML是：

<table data-tabgroup="1"> 
    <tr> 
     <td><input type="text" name="b" data-tabindexoffset="0" value="1" /></td> 
     <td><input type="text" name="c" data-tabindexoffset="2" value="3" /></td> 
    </tr> 
    <tr> 
     <td><input type="text" name="d" data-tabindexoffset="1" value="2" /></td> 
     <td><input type="text" name="e" data-tabindexoffset="3" value="4" /></td> 
    </tr> 
</table> 

<a href="#">A link</a> 
<input type="text" name="f" />