Tab鍵索引

Question

請參考下面

<form method="post" action="register">  
    <div class="email"> 
     Email <input type="text" tabindex="1" id="email" value="" name="email">     </div> 
    </div> 
    <div class="agreement"> 
     <div tabindex="2" class="terms_radio"> 
      <div onclick="changeTerm(this);" class="radio" id="terms_radio_wrapper" style="background-position: left 0pt;"> 
       <input type="radio" id="terms" value="1" name="terms"><label for="terms">I have read and understood the</label> 
      </div> 
     </div> 
    </div> 
    <div class="form_submit"> 
     <input type="button" tabindex="3" value="Cancel" name="cancel"> 
     <input type="submit" tabindex="4" value="Submit" name="submit">   
    </div> 
</form> 

在這裏，我以這樣的方式無線電輸入完全隱藏和背景圖像將被應用於包裝DIV和風格的協議複選框形式的HTML代碼的onclick包裝的div將切換的背景圖像以及所述無線輸入的檢查狀態。

我需要設置tabIndex指數上的「terms_radio」 DIV，根本的tabindex =上格「2」屬性不能正常工作，

是否有可能帶來的虛線邊框標籤上的無線電輸入在向上按TAB當光標在電子郵件輸入字段？

Answer 1

DIV元件不具有tabIndex in HTML4）兼容。

（注意 HTML 5規範不允許這樣做，但是，它通常工作不分）

下列元素支持的tabindex屬性：A，區域，按鈕輸入，對象，選擇，和TEXTAREA。

基本上任何你希望能夠持有焦點;表單元素，鏈接等

我想你可能想在這裏做的是使用一些JS（我會建議jQuery爲相對無痛的東西）綁定到輸入元素上的焦點事件，並設置邊框母公司。

棒這在你身上的標籤從谷歌CDN搶jQuery的底部：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> 

那麼這樣的事情可能會做的伎倆：

$(function() { 
    $('div.radio input').bind({ 
     focus : function() { 
      $(this).closest('div.radio').css('border','1px dotted #000'); 
     }, 
     blur : function() { 
      $(this).closest('div.radio').css('border','none'); 
     } 
    }); 
}); 

Answer 2

是的！這裏是它的一個規範，其名爲WAI-ARIA及其輔助功能：https://www.w3.org/TR/wai-aria-practices/#kbd_general_between

Answer 3

jSFiDDLE

$(document).ready(function() { 
lastIndex = 0; 
$(document).keydown(function(e) { 
    if (e.keyCode == 9) var thisTab = $(":focus").attr("tabindex"); 
    if (e.keyCode == 9) { 
     if (e.shiftKey) { 
      //Focus previous input 
      if (thisTab == startIndex) { 
       $("#" + tabLimitInID).find('[tabindex=' + lastIndex + ']').focus(); 
       return false; 
      } 
     } else { 
      if (thisTab == lastIndex) { 
       $("#" + tabLimitInID).find('[tabindex=' + startIndex + ']').focus(); 
       return false; 
      } 
     } 
    } 
}); 
var setTabindexLimit = function(x, fancyID) { 
     console.log(x); 
     startIndex = 1; 
     lastIndex = x; 
     tabLimitInID = fancyID; 
     $("#" + tabLimitInID).find('[tabindex=' + startIndex + ']').focus(); 
    } 
/*Taking last tabindex=10 */ 
setTabindexLimit(10, "Selector_With_Where_Tab_Index_You_Want"); 
}); 

setTabindexLimit（）函數的兩個屬性這是最後的tabIndex在事業部和Selector_With_Where_Tab_Index_You_Want是要在其中tabindexto重複div的類或ID。

Answer 4

你可以把tabindex屬性=「2」無線電元件和隱藏無線電元件（未帶顯示：沒有，但用z-index，這樣它就能保持tabbable）。當您按下標籤是在電子郵件輸入字段，收音機獲取焦點，並且可以使用

input:focus+label {} 

樣式標籤

Answer 5

你可以簡單地tabindex屬性值更改爲2比0。

<div tabindex="0" class="terms_radio">

這提供了你的代碼的流轉默認焦點狀態。

https://www.w3.org/WAI/PF/aria-practices/#focus_tabindex