英文:
multiple radio fieldsets one followed by another do not preserve tabbing order (one of the fieldsets gets skipped)
问题
当存在多个单选按钮字段集，一个跟在另一个后面，例如在以下示例中：https://www.w3.org/WAI/tutorials/forms/grouping/
在使用Tab键时，其中一个字段集会被跳过。我尝试为传说和字段集设置不同的ID，但行为没有改变，Tab键仅会落在一个字段集上并跳过下一个字段集 - 这往往只会发生在一个单选按钮字段集后面跟着另一个单选按钮字段集的情况下。如果我们在中间放置一个文本字段，Tab键的工作就如预期那样。
是否有一种方法可以保持Tab键的顺序，而无需实现自定义JavaScript功能？
<fieldset style="border: 1px solid #888; padding: 5px;">
<legend>输出格式</legend>
<div>
<input type="radio" name="format" id="txt" value="txt" checked=""> <label for="txt">文本文件</label>
</div>
<div>
<input type="radio" name="format" id="csv" value="csv"> <label for="csv">CSV文件</label>
</div>
<div>
<input type="radio" name="format" id="html" value="HTML"> <label for="html">HTML文件</label>
</div>
</fieldset>
<fieldset style="border: 1px solid #888; padding: 5px;">
<legend>输出格式</legend>
<div>
<input type="radio" name="format" id="txt" value="txt" checked=""> <label for="txt">文本文件</label>
</div>
<div>
<input type="radio" name="format" id="csv" value="csv"> <label for="csv">CSV文件</label>
</div>
<div>
<input type="radio" name="format" id="html" value="HTML"> <label for="html">HTML文件</label>
</div>
</fieldset>
英文:
when having multiple radio fieldset, one followed by another as in for example in
<https://www.w3.org/WAI/tutorials/forms/grouping/>
one of the fieldsets gets skipped when tabbing
i tried setting separate ids for legends, and fieldsets but behavior does not change tab will only land on one fieldset and skip the next - this tends to happen only of there is a radio fieldset followed by another radio. If we place a text field in between tabbing works as expected
Is there a way to preserve order of tabbing without having to implement custom js functionality?
<fieldset style="border: 1px solid #888; padding: 5px;">
<legend>Output format</legend>
<div>
<input type="radio" name="format" id="txt" value="txt" checked=""> <label for="txt">Text file</label>
</div>
<div>
<input type="radio" name="format" id="csv" value="csv"> <label for="csv">CSV file</label>
</div>
<div>
<input type="radio" name="format" id="html" value="HTML"> <label for="html">HTML file</label>
</div>
</fieldset>
<fieldset style="border: 1px solid #888; padding: 5px;">
<legend>Output format</legend>
<div>
<input type="radio" name="format" id="txt" value="txt" checked=""> <label for="txt">Text file</label>
</div>
<div>
<input type="radio" name="format" id="csv" value="csv"> <label for="csv">CSV file</label>
</div>
<div>
<input type="radio" name="format" id="html" value="HTML"> <label for="html">HTML file</label>
</div>
</fieldset>
答案1
得分: 1
这是正常预期的行为。只有当前选定的单选按钮，或者组按钮中的一个单选按钮应该在选项卡顺序中具有焦点。
其他单选按钮通常可以通过箭头键到达。
实际上，您在这里的错误在于组并不是您期望的那个。
组是根据单选按钮的名称逻辑地建立的，不考虑 fieldset 和 legend。
在您的示例中，由于所有单选按钮都具有相同的名称，它们都属于同一组。
尝试更改第二组单选按钮的名称，您的问题应该得到解决。
英文:
This is the normal expected behavior. Only the currently selected radio button, or only one radio button of the group button should be focusable in tab order.
Other ones are usually be reached with arrow keys.
IN fact, your error here is that the group isn't the one you expect.
The group is logically established using the name of the radio button, regardless of fieldsets and legends.
In your example, since all radio buttons have the same name, they all belong to the same group.
Try changing the name for the radio buttons of the second group and your problem should be solved.
答案2
得分: 0
你是在说W3C网站上的示例之一不起作用吗？我尝试了它们都能正常工作。
在你的代码示例中，所有的单选按钮都在同一组中，name="format"，所以它们只会有一个选项卡停留，即使两组单选按钮位于不同的字段集中。
将你的第二组单选按钮更改为具有name="format2"或与第一单选按钮组不同的名称。
英文:
Are you saying one of the examples on the W3C site is not working? I tried them all and they were ok.
In your code example, all the radio buttons are in the same group, name="format" so it will only be one tab stop even though the two sets of radio buttons are in separate fieldsets.
Change your second set of radio buttons to have name="format2" or something different from the first radio group.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论