2013-01-14 26 views
36

Tôi có danh sách các nút radio. khi tôi duyệt qua chúng, có vẻ như chỉ có nút radio đầu tiên hoặc nút được chọn sẽ được tập trung, các nút radio còn lại sẽ bị bỏ qua. hộp kiểm không có vấn đề này.Bạn có thể duyệt qua tất cả các nút radio không?

http://jsfiddle.net/2Bd32/

Tôi có một thời gian khó khăn để giải thích cho QA của tôi đây không phải là một lỗi. ai đó có thể vui lòng giải thích cho tôi tại sao điều này xảy ra.

Soccer: <input type="checkbox" name="sports" value="soccer" tabindex="1" /><br /> 
Football: <input type="checkbox" name="sports" value="football" tabindex="2" /><br /> 

<input type="radio" name="num" value="3" tabindex="3">3<br> 
<input type="radio" name="num" value="4" tabindex="4">4<br> 
<input type="radio" name="num" value="5" tabindex="5">5<br> 
<input type="radio" name="num" value="6" tabindex="6">6<br> 
<input type="radio" name="num" value="7" tabindex="7">7<br> 

Baseball: <input type="checkbox" name="sports" value="baseball" tabindex="8" /><br /> 
Basketball: <input type="checkbox" name="sports" value="basketball" tabindex="9" /> 
+0

Dường như trình duyệt của bạn với tôi. Bạn đang dùng trình duyệt nào? Bạn đã thử nó trong các trình duyệt khác chưa? –

+0

đã thử firefox, ie9 và chrome – qinking126

+0

Hãy nhớ rằng hành vi mặc định 'sửa' dẫn đến thường xuyên hơn đối với các lỗi khét tiếng .... nếu bạn được thanh toán theo giờ, hãy thực hiện, nếu bạn đang ở trong một dự án thời gian/ngân sách cố định khôn ngoan .... – rene

Trả lời

65

Bạn có thể trích dẫn W3C làm nguồn của mình, herehere.

Về cơ bản nút radio là một nhóm hoạt động như một phần tử đơn vì nó chỉ giữ lại một giá trị duy nhất. Tabbing vào một nhóm radio sẽ đưa bạn đến mục đầu tiên và sau đó sử dụng các phím mũi tên bạn điều hướng trong nhóm.

  • Focus có thể di chuyển đến một nhóm đài phát thanh qua:
    • Các phím Tab
    • Một Access Key hoặc ghi nhớ nhắm mục tiêu nhãn
    • Kích hoạt của nhãn (thông qua cơ chế Kỹ Thuật Trợ Giúp)
  • Phím Tab di chuyển tiêu điểm giữa nút radio các nhóm và các tiện ích khác.
  • Khi tiêu điểm nằm trong nhóm và khi không có nút radio nào được chọn:
    • Nhấn phím di chuyển tiêu điểm vào nút radio đầu tiên trong nhóm, nhưng không chọn nút radio .
    • Phím Shift + Tab sẽ di chuyển tiêu điểm đến nút radio cuối cùng trong nhóm, nhưng không chọn nút radio.
  • Khi tiêu điểm di chuyển đến nhóm trong đó nút radio được chọn được chọn, nhấn Tab và Shift + Tab di chuyển tiêu điểm sang nút radio được chọn.
  • Mũi tên lên và mũi tên xuống di chuyển lấy nét và lựa chọn.
    • Mũi tên nhấn phím mũi tên di chuyển tiêu điểm và lựa chọn chuyển tiếp qua các nút radio trong nhóm. Nếu nút radio đầu tiên có tiêu điểm, sau đó lấy nét và lựa chọn di chuyển đến nút radio cuối cùng trong nhóm.
    • Mũi tên xuống nhấn phím mũi tên di chuyển tiêu điểm và chọn lùi qua các nút radio trong nhóm. Nếu nút radio cuối cùng có tiêu điểm, thì lấy nét và lựa chọn sẽ chuyển sang nút radio đầu tiên trong nhóm. * Phím cách nhấn phím Space kiểm tra nút radio hiện đang tập trung.
  • Khi nhập lại nhóm, hãy tập trung quay về điểm lấy nét trước (mục có bộ chọn).
  • Nhấn phím Tab thoát nhóm và di chuyển tiêu điểm đến điều khiển biểu mẫu tiếp theo.
  • Nhấn phím Shift + Tab sẽ thoát khỏi nhóm và di chuyển tiêu điểm đến điều khiển biểu mẫu trước đó.
+1

Tôi đã viết [plugin jQuery] (https://gist.github.com/jonathanconway/899a0856a8b16245cca3) và [Chỉ thị góc] (https://gist.github.com/jonathanconway/ ae2739de99c52c971cbb) sẽ làm cho bất kỳ tập hợp các nút radio riêng biệt có thể lấy nét thông qua TAB. Có thể hữu ích cho ai đó. :) – Jonathan

+0

là nó có thể phác thảo nhóm radio khi không có đài phát thanh từ nhóm được chọn chưa? –

9

nút với một tên Radio là như kiểm soát duy nhất (như đầu vào hoặc chọn), bạn có thể thay đổi nó đánh giá cao với các phím mũi tên, di chuyển tab chính tập trung để kiểm soát khác.

1

Nếu bạn đang sử dụng angularjs, bạn có thể kiểm soát nút radio trực tiếp với ng-model bằng cách sử dụng cùng một ng-model và loại bỏ name.

<input type="radio" value="0" ng-model="status"> 
<input type="radio" value="1" ng-model="status"> 

Bây giờ, một lợi thế nữa bên cạnh nhấn tab là bạn có thể tập trung đầu tiên qua nút radio mà không thực sự chọn nó. Sau đó, bạn có thể chọn bằng cách nhấn không gian.

Các vấn đề liên quan