如何在按Tab鍵時通過HTML元素進行旋轉？

Question

未使用JQuery
如何在按Tab鍵時通過HTML元素旋轉？
例如
在這種形式

<form> 
    Field 1: <input type="text" id="field1" tabindex=1 /><br /> 
    Field 2: <input type="text" id="field2" tabindex=2 /><br /> 
    Field 3: <input type="text" id="field3" tabindex=3 /><br /> 
    Field 4: <input type="text" id="field3" tabindex=4 /><br />  
</form> 

當用戶按Tab鍵連續
聚焦項目將
FIELD1 - > FIELD2 - >字段3 - >字段4 - > FIELD1 - > FIELD2 - >字段3 - > field4 - > field1 - > ...
依此類推

Answer 1

試試這個後字段4：

<script type="text/javascript"> 
var myInput = document.getElementById("field4"); 
if(myInput.addEventListener) { 
    myInput.addEventListener('keydown',this.keyHandler,false); 
} else if(myInput.attachEvent) { 
    myInput.attachEvent('onkeydown',this.keyHandler); /* damn IE hack */ 
} 

function keyHandler(e) { 
    var TABKEY = 9; 
    if(e.keyCode == TABKEY) { 
     if(e.preventDefault) { 
      e.preventDefault(); 
     } 
     document.getElementById('field1').focus(); 
     return false; 
    } 
} 
</script> 

Answer 2

Tab應該在所有現代瀏覽器中通過表單元素進行旋轉。您可以使用html5 autofocus屬性強制光標在列表中的第1項上自動對焦。下面是一個example

HTML

<form> 
    Field 1: <input type="text" id="field1" tabindex=1 autofocus="autofocus" /><br /> 
    Field 2: <input type="text" id="field2" tabindex=2 /><br /> 
    Field 3: <input type="text" id="field3" tabindex=3 /><br /> 
    Field 4: <input type="text" id="field3" tabindex=4 /><br />  
</form> 

@JaredMcAteer是在使用自動對焦絕對正確會降低用戶體驗，尤其是那些可訪問性的擔憂。請考慮這一點。

Answer 3

我找到了另一種方式來做到這一點。給你的表單上的最後一個div或其他任何一個tabindex，然後當它獲得焦點時，只需將焦點移動到表單上的第一個元素。我沒有在我的領域設置明確的tabindex，所以使用tabindex = 0的作品。

var $last = $(".ok-cancel"); 
$last.attr("tabindex", "0"); 
$last.on("focus", function(){ ... move focus to first field ... })); 

這樣做，你不需要知道的是比第一輸入（其中您可以根據需要自動發現）以外的形式還有什麼優勢。

PS：我知道這個問題說沒有的jQuery但多數民衆贊成我的代碼是什麼

Answer 4

首先，我要感謝社會。這是我多年來從你們那裏獲得答案後的第一個貢獻。

昨天我正在尋找一些如何做到這一點的例子。最後，我做了我自己的基於箭頭導航的代碼，因爲JaredMcAteer指出，Tab鍵不應該在列表中爲了可訪問性原因而旋轉，而是沿着活動元素的總索引跳轉。在這裏你可以找到代碼。希望它有助於某人。

$('[role="menu"] li:first-child a').focus(); 
 
$('[role="menu"] a').keydown(function(e){ 
 
\t \t var myIndex = $(this).parent().index(); 
 
\t \t var mySibling = $(this).parents('[role="menu"]').children(); 
 
\t \t var first = mySibling[0]; 
 
\t \t var last = mySibling.get(-1); 
 
\t \t if (e.which === 38 || e.keyCode === 38){ 
 
\t \t \t e.preventDefault(); 
 
\t \t \t var prev = mySibling[myIndex - 1]; 
 
\t \t \t if(prev){ 
 
\t \t \t \t $(prev).children('a').focus(); 
 
\t \t \t }else { 
 
\t \t \t \t $(last).children('a').focus(); 
 
\t \t \t } 
 
\t \t } 
 
\t \t if (e.which === 40 || e.keyCode === 40){ 
 
\t \t \t e.preventDefault(); 
 
\t \t \t var next = mySibling[myIndex + 1]; 
 
\t \t \t if(next){ 
 
\t \t \t \t $(next).children('a').focus(); 
 
\t \t \t }else { 
 
\t \t \t \t $(first).children('a').focus(); 
 
\t \t \t } 
 
\t \t } 
 
\t });

.menu ul { 
 
\t margin: 0; 
 
\t padding: 0.313rem; 
 
\t background: #ccc; 
 
\t opacity: 1; 
 
} 
 
.menu li { 
 
    display: block; 
 
} 
 
.menu li a { 
 
\t display: block; 
 
\t position: relative; 
 
\t width: 100%; 
 
\t padding: 0.313rem; 
 
\t text-decoration: none; 
 
} 
 
.menu ul li:nth-last-child(n+2) { 
 
\t border-bottom: solid 1px #fff; \t 
 
} 
 
.menu ul a:hover, .menu ul a:focus { 
 
\t background: #fff; 
 
    border: 0; 
 
    outline: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
\t \t <ul class="menu" role="menubar"> 
 
\t \t \t <li role="menuitem"><a href="#target22" title="" class="settingsIcon">nav Item</a> 
 
\t \t \t \t <ul id="target22" role="menu"> 
 
\t \t \t \t \t <li role="menuitem" class="active"><a href="#menu1" title="">First Menu Item of the menu collection</a></li> 
 
\t \t \t \t \t <li role="menuitem"><a href="#menu2" title="">Menu Item</a></li> 
 
\t \t \t \t \t <li role="menuitem"><a href="#menu3" title="">Menu Item</a></li> 
 
\t \t \t \t </ul> 
 
\t \t \t </li> 
 
\t \t </ul> 
 
\t </nav>