Tab Index trên div

Question

Xin vui lòng xem các mẫu mã HTML bên dưới

<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> 

Ở đây tôi theo kiểu thỏa thuận hộp kiểm tra theo cách như vậy mà đầu vào đài phát thanh là hoàn toàn ẩn và hình nền được áp dụng cho các div wrapper, và onclick div của trình bao bọc sẽ chuyển đổi hình nền cũng như trạng thái đã kiểm tra của đầu vào radio.

tôi cần phải thiết lập các chỉ số tabIndex trên 'terms_radio' DIV, chỉ cần tabIndex = "2" thuộc tính trên div không hoạt động,

Có thể mang theo biên giới rải rác trên nhãn cho đầu vào đài phát thanh trên nhấn TAB khi con trỏ ở trường nhập email?

Answer 1

Các yếu tố DIV không tương thích với tabindex in HTML4).

(LƯU Ý HTML 5 đặc tả không cho phép điều này, tuy nhiên, và nó thường làm việc bất kể)

Các yếu tố sau đây hỗ trợ các thuộc tính tabIndex: A, KHU, NÚT, INPUT, OBJECT, CHỌN và TEXTAREA.

Về cơ bản, bạn có thể mong đợi để có thể giữ tiêu điểm; các yếu tố hình thức, liên kết, v.v ..

Điều tôi nghĩ bạn có thể muốn làm ở đây là sử dụng một chút JS (Tôi khuyên bạn nên jQuery cho một thứ tương đối không đau) để liên kết với sự kiện lấy nét trên phần tử nhập và đặt đường viền div cha.

Stick này ở dưới cùng của thẻ cơ thể của bạn để lấy jQuery từ CDN của Google:

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

Sau đó, một cái gì đó như thế này có lẽ sẽ làm các trick:

$(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

Có! Có một spec cho nó, nó được gọi là WAI-ARIA và nó cho khả năng tiếp cận: 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() chức năng hai thuộc tính đó là tabIndex cuối cùng trong Div và Selector_With_Where_Tab_Index_You_Want là lớp hoặc ID của div Trong đó bạn muốn lặp lại tabindexto.

Answer 4

Bạn có thể đặt tabindex = "2" cho phần tử radio và ẩn phần tử radio (không có display: none, nhưng với z-index, để nó vẫn giữ tabbable). Khi bạn bấm tab là trên lĩnh vực đầu vào email, đài phát thanh được tập trung, và bạn có thể sử dụng

input:focus+label {} 

để tạo kiểu cho nhãn

Answer 5

Bạn chỉ có thể thay đổi giá trị tabIndex 2-0.

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

Chế độ này cung cấp trạng thái lấy nét mặc định đi cùng với mã của bạn.

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