我有一个类似于下图所示的表格。有一组radio和对应的输入框。
它应该遵循的条件
- 第一个选项卡索引选择组 1 的第一个单选按钮。如果必须更改选择，我可以使用箭头键
- 第二个选项卡索引应该从组 2 中选择第一个 radio 。如果必须更改选择，我可以使用箭头键
- 在第 2 组中，如果我再次按 Tab，它应该聚焦于与 radio 相对应的文本框
- 再次按 Tab 键应该将焦点转到第 3 组文本框
除了选择第 2 组的第一个 radio 时，以上所有条件都有效。按选项卡确实将其带到相应的文本框。但是再次按下选项卡时，它会转到第 2 组的另一个文本框(这不应该发生)。
请帮忙。 HTML代码如下
<html>
<body>
Please select gender (Group 1)<br>
<input type="radio" checked name="gender" tabindex="1" value="male"> Male<br>
<input type="radio" name="gender"tabindex="1" value="female"> Female
<br><br>
Please select one of following (Group 2)<br>
<input type="radio" checked name="payment"tabindex="2" value="amount"> $<input type="text" tabindex="2.1"><br>
<input type="radio" name="payment" tabindex="2" value="installment">#<input type="text" tabindex="2.1">
<br><br>
Please select payment date (Group 3)<br>
<input type="text" tabindex="3">
</body>
</html><< 当光标位于如图所示的位置时尝试按 tab 键 >>
最佳答案
由于您的帖子带有 javascript 标签，我认为 javascript 是允许的。禁用输入字段将防止对其进行“制表”。因此，默认情况下禁用“#”后的文本字段(通过添加 disabled="disabled")并将 onchange-events 添加到单选按钮以禁用 '$' 后的文本字段和在“#”之后启用文本字段(反之亦然)。
onchange="document.getElementById('amount').disabled=null; document.getElementById('installment').disabled='disabled'; "
并将正确的 id 添加到文本字段，这样 javascript-selectors 就会工作。
完整代码:
<html>
<body>
Please select gender (Group 1)<br>
<input type="radio" checked name="gender" tabindex="1" value="male"> Male<br>
<input type="radio" name="gender"tabindex="1" value="female"> Female
<br><br>
Please select one of following (Group 2)<br>
<input type="radio" checked name="payment"tabindex="2" value="amount" onchange="document.getElementById('amount').disabled=null; document.getElementById('installment').disabled='disabled'; "> $<input type="text" tabindex="2.1" id="amount"><br>
<input type="radio" name="payment" tabindex="2" value="installment" onchange="document.getElementById('amount').disabled='disabled'; document.getElementById('installment').disabled=null; ">#<input type="text" tabindex="2.1" disabled="disabled" id="installment">
<br><br>
Please select payment date (Group 3)<br>
<input type="text" tabindex="3">
</body>
</html>关于javascript - 如何在一组单选和输入字段上使用 tabindex 和箭头键，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45356424/