题 你可以通过所有单选按钮标签吗?


我有一个单选按钮列表。当我通过它们进行选项卡时,似乎只有第一个单选按钮或被选中的单选按钮才会聚焦,其余的单选按钮将被跳过。复选框没有这个问题。

http://jsfiddle.net/2Bd32/

我很难向我的QA解释这不是一个错误。有人可以向我解释为什么会这样。

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

41
2018-01-14 16:34


起源


好像你的浏览器对我来说。你使用的是什么浏览器?你有没有在其他浏览器中尝试过? - Wilson Biggs
尝试过firefox,ie9和chrome - qinking126
请记住,“修复”默认行为往往导致臭名昭着的臭虫....如果你按小时付款,那就去吧,如果你在一个固定的时间/预算项目中是明智的.... - rene


答案:


您可以引用W3C作为您的来源, 这里 和 这里

基本上,单选按钮是一个作为单个元素运行的组,因为它只保留一个值。通过标签指向收音机组,您将转到第一个项目,然后使用在组内导航的箭头键。

  •  焦点可以通过以下方式转移到广播组:
    •  Tab键   
    •  针对标签的访问密钥或助记符
    •   激活标签(通过辅助技术机制)   
     
  •  Tab键在单选按钮之间移动焦点   组和其他小部件。
  •  当焦点集中在组和   没有选择单选按钮时:
    •  Tab键按下可移动焦点   到组中的第一个单选按钮,但不选择无线电   按钮。
    •  Shift + Tab键按下可将焦点移至最后一个收音机   组中的按钮,但不选择单选按钮。
  •  当焦点移动到单选按钮所在的组时   选中,按Tab键和Shift + Tab键将焦点移动到收音机   选中的按钮。
  •  向上箭头和向下箭头键移动   重点和选择。
    •  向上箭头键按下移动焦点和   通过组中的单选按钮向前选择。如果是第一个   单选按钮具有焦点,然后焦点和选择移动到最后   组中的单选按钮。
    •  向下箭头键按下移动焦点   并通过组中的单选按钮向后选择。如果   最后一个单选按钮有焦点,然后焦点和选择移动到   组中的第一个单选按钮。 *空格键按键检查   目前有焦点的单选按钮。
     
  •  什么时候   重新进入该组,焦点返回到前一个焦点   (具有选择集的项目)。
  •  按Tab键退出   该组并将焦点移至下一个表单控件。
  •  紧迫   Shift + Tab键退出组并将焦点移至上一个   形式控制。

72
2018-01-14 16:44



我写了一篇 jQuery插件 和 角度指令 这应该使任何一组单选按钮可以通过TAB单独聚焦。可能对某人有用。 :) - Jonathan
当没有选择来自该组的无线电时,是否可以概述无线电组? - Ben Sewards


单选按钮 名称 就像单个控件(如输入或选择),您可以使用箭头键更改其值,Tab键将焦点移动到另一个控件。


9
2018-01-14 16:38





如果您正在使用angularjs,您可以直接使用控制单选按钮 ng-model 通过使用相同 ng-model 并删除 name

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

除了标签按钮之外,还有一个优点是您可以首先通过单选按钮进行对焦而无需实际选择它。然后,您可以按选择 空间


1
2018-06-30 08:56