因此，舉例來說，下面的腳本：如何在tabindex已經到達帶有tabindex的最後一個元素後重復tabindex？
<!-- Random content above this comment -->
<input type="text" tabindex="1" />
<input type="text" tabindex="2" />
<input type="text" tabindex="3" />
<input type="text" tabindex="4" />
<input type="text" tabindex="5" />
<input type="text" tabindex="6" />
<!-- Nothing underneath this comment -->
所以，當用戶按下選項卡，並通過六個文本框去，到達最後一個，然後按下選項卡，它會去上面的第一個內容評論，對吧？那麼，我該如何讓它再次從tabindex="1"開始？
不幸的是，你不能這樣做沒有JavaScript。您可以收聽TAB（並確保它不是SHIFT + TAB）按鍵上的最後一個元素，並手動將焦點設置爲處理程序中的第一個元素。然而，結合這個邏輯鍵盤事件（即特定輸入法）不是普遍的，使用時可能無法正常工作：
我建議一個更加普遍的做法，是不可知的重點是如何變化的。
的想法是，你環繞你的表單元素（要在其中創建「的tabindex環」）與特殊的‘焦點後衛’的元素是可聚焦太（他們有分配的tabIndex）。下面是修改後的HTML：
<p>Some sample <a href="#" tabindex="0">content</a> here...</p>
<p>Like, another <input type="text" value="input" /> element or a <button>button</button>...</p>
<!-- Random content above this comment -->
<!-- Special "focus guard" elements around your
if you manually set tabindex for your form elements, you should set tabindex for the focus guards as well -->
<div class="focusguard" id="focusguard-1" tabindex="1"></div>
<input id="firstInput" type="text" tabindex="2" class="autofocus" />
<input type="text" tabindex="3" />
<input type="text" tabindex="4" />
<input type="text" tabindex="5" />
<input type="text" tabindex="6" />
<input id="lastInput" type="text" tabindex="7" />
<!-- focus guard in the end of the form -->
<div class="focusguard" id="focusguard-2" tabindex="8"></div>
<!-- Nothing underneath this comment -->
現在你只是聽focus事件的那些後衛元素和手動更改焦點轉移到相應的字段（jQuery的用於簡單起見）：
$('#focusguard-2').on('focus', function() {
// "last" focus guard got focus: set focus to the first field
$('#firstInput').focus();
});
$('#focusguard-1').on('focus', function() {
// "first" focus guard got focus: set focus to the last field
$('#lastInput').focus();
});
由於您看到，我還確保當焦點從第一個輸入向後移動時（例如，第一個輸入上的SHIFT + TAB），我們會回到最後一個輸入。Live example
請注意，聚焦警衛也被分配了tabindex值，以確保它們緊接在輸入字段之前/之後。如果您沒有手動設置tabindex到您的輸入，那麼兩個焦點警衛都可以分配tabindex="0"。
當然，當你的表格動態生成時，你也可以在動態環境中完成所有工作。只需找出您的focusable elements（較不重要的任務）並用相同的保護裝置環繞它們即可。
希望有幫助，讓我知道你是否有任何問題。
UPDATE
由於NBRO指出，上述實現了，如果一個擊中TAB在頁面加載後（因爲這會關注第一聚焦元素是#focusguard-1選擇最後一個元素的不需要的效果，這將引發聚焦，最後輸入爲了減輕這一點，你可以指定你想要的元素最初的重點是他和另一個小片的JavaScript的重點是：
$(function() { // can replace the onload function with any other even like showing of a dialog
$('.autofocus').focus();
})
隨着這個，只要設置autofocus類就可以了，不管你想要什麼樣的元素，它都會專注於頁面加載（或任何你聽的其他事件）。
但是，如果我理解正確，該方法將使焦點轉到最後一個元素if我第一次點擊標籤按鈕，一旦頁面加載，這是不可取的... – nbro
@nbro真的，這是一個不幸的副作用。但是由於這個實現需要「JavaScript干預」，所以要求通過javascript設置初始焦點也不是不合理的。查看更新的答案。 –
我建議你增加你的tabindex ie。 > 100 並且還將tabIndex指向您的「內容」容器div 請注意，您的內容容器的tabindex必須小於ex.99的輸入框。
當你使用javascript按您的內容DIV上最後輸入框中手動設置對焦選項卡（你可以使用Tab鍵的按鍵處理程序）
document.getElementById("content").focus();
必須連鎖行業的tabindex爲您的「內容」設置焦點到它。
現在如果按下標籤焦點會自動轉移到第一個輸入框。
希望這會有所幫助。
謝謝
是的，在通過輸入標籤後，它會跳到沒有指定標籤順序的合適元素上。而且，在標記所有「可放大」元素後，焦點將跳到頁面內容的「外部」，瀏覽器的UI元素（標籤，菜單，書籤等）
我認爲最簡單的方法是處理keyup活動的最後一個輸入和攔截TAB使用（和SHIFT + TAB 爲此事）
這是一個古老的話題，然而在今天的多設備世界中，問題只會變得更加相關。'keydown'方法有缺點，我在我的回答中添加了更明確的說明 –
這裏我的解決方案，您無需任何其他元素。正如你所看到的元素將在<form>元素內循環。
$('form').each(function(){
var list = $(this).find('*[tabindex]').sort(function(a,b){ return a.tabIndex < b.tabIndex ? -1 : 1; }),
first = list.first();
list.last().on('keydown', function(e){
if(e.keyCode === 9) {
first.focus();
return false;
}
});
});
請參閱我的答案的第一部分 –
這裏是我的解決方案，考慮到第一輸入具有「自動對焦」屬性設置：
表單元素後添加這個（用HTML5它可以是任何標籤）：
<div tabindex="6" onFocus="document.querySelector('[autofocus]').focus()"></div>
你可以爲每個你不想屬於taborder的元素設置'tabindex =「 - 1」'，也就是說你的代碼中的''Random content'「部分的每個可聚焦元素。 [MSDN：tabindex]（http://msdn.microsoft.com/en-us/library/ie/ms534654%28v=vs.85%29.aspx）（在MDN處找不到頁面） – Teemu
** 'document.body.tabIndex ='0'; document.body.focus（）; document.body.tabindex ='-1'' **也可以使用相同的tabindex，如果它們在HTML中正確排序的話 – neaumusic