分组单选按钮中的 Tabindex答案

【问题标题】：Tabindex in grouped radio button分组单选按钮中的 Tabindex
【发布时间】：2023-03-31 19:46:01
【问题描述】：

我需要将 tabindex 放在分组的单选按钮上，以便标签按顺序聚焦每个单选按钮。为此，我只需要使用“tab 键”（而不是箭头键），而且，我必须将它们（单选按钮）放在一个组中。

<input onclick="javascript:showUserName();" name="userSearch" value="UN" type="radio">
<input onclick="javascript:showLoginID();" name="userSearch" value="UL" type="radio">
<input onclick="javascript:showEmployeeID();" name="userSearch" value="EI" type="radio">

问题在于 tabindex 仅将选定的单选按钮集中在一个组中，并且在随后的选项卡上它转到下一组 Html 元素，而不是组中的下一个单选按钮。我知道，这是标准的浏览器行为，但有什么办法可以解决我的要求吗？

编写一个 JS 代码来监控我的页面上的 onkeypress 事件以监控选项卡和单选组组合以明确关注单选组按钮是一种好方法吗？

【问题讨论】：

标签： html radio-button tabindex

【解决方案1】：

您可以将 onkeydown 绑定到您的输入并检查键码是否与选项卡按下键码匹配，然后实现您自己的行为。

类似：

<input onkeydown="if (event.keyCode==%TABKEYCODE%) handleTabPress(); return false;".... />

然后，您可以在 handleTabPress 中实现自己的机制，以了解如果按下 Tab 键会发生什么。并且您应该将焦点设置在 onclick 事件中的单选按钮上。

【讨论】：

THnaks 我实现了这个功能，它达到了我的目的。