生成的单选按钮选项卡

Question

我似乎无法让我的单选按钮允许在下面的 table 中导航它们。 table 本身甚至没有 select 选项卡按钮，但页面上的所有其他元素都有。单选按钮和 table 行是通过循环生成的。有没有办法让选项卡按钮到 select table，然后浏览单选按钮？如果您需要更多信息，请告诉我。

网页：

<%-- Loop through all managers and write the radio button options --%>
 <%int managerIndex = 1; %>
   <%foreach (Manager manager in Managers) %>
            <%{ %>
                <%string responseValue = x;%>
                    <td>
                        <table id='RadioButtonList<%=managerIndex %>' border="0" style="height:25px">
                    <%=HtmlHelper.GetRadioButtonGroupHtml("Radio" + managerIndex, item.SurveyQuestionID, manager.ManagerID, manager.ManagerRoleID, rowClass, "radioList1", responseValue)%>
                        </table>
                    </td>
                <%managerIndex++; %>
            <%} %>
            </tr>

代码隐藏：

StringBuilder html = new StringBuilder();

html.Append("<tr>");

// create a hidden blank value that is checked by default
html.Append(String.Format("<td style=\"display:none\"><input id=\"{0}\" type=\"radio\" name=\"ctl_QID{1}_MID{2}\" value=\"{3}\" checked/><label for=\"{4}\"></label></td>", id + 0, questionId, managerId, "", group));

// create the radio buttons for the values of 1-5
for (int i = 1; i <= 5; i++)
{
    // set the button to 'checked' if the response value matches
    if (i.ToString() == responseValue)
        html.Append(String.Format("<td style=\"width:30px\"><input id=\"{0}\" type=\"radio\" name=\"ctl_QID{1}_MID{2}\" value=\"{3}\" checked/><label for=\"{4}\"></label></td>", id + i, questionId, managerId, i, group));
    else
        html.Append(String.Format("<td style=\"width:30px\"><input id=\"{0}\" type=\"radio\" name=\"ctl_QID{1}_MID{2}\" value=\"{3}\" /><label for=\"{4}\"></label></td>", id + i, questionId, managerId, i, group));
}

// create the N/R radio button and set it to 'checked' if necessary
if (responseValue == "NA")
    html.Append(String.Format("<td style=\"width:30px; background-color: #798d8f; text-align: center;\"><input id=\"{0}\" type=\"radio\" name=\"ctl_QID{1}_MID{2}\" value=\"{3}\" checked/><label for=\"{4}\"></label></td>", id + 6, questionId, managerId, "NA", group));
else
    html.Append(String.Format("<td style=\"width:30px; background-color: #798d8f; text-align: center;\"><input id=\"{0}\" type=\"radio\" name=\"ctl_QID{1}_MID{2}\" value=\"{3}\" /><label for=\"{4}\"></label></td>", id + 6, questionId, managerId, "NA", group));

// append the closing <tr> tag
html.Append("</tr>");
return html.ToString();

Answer 1

您可以向输入单选元素添加 tabindex 属性 - tabindex="0"。将使用 Tab 键（按照它们在您的源代码中的顺序）聚焦它们。

0索引是一个特殊索引。来自 MDN：

tabindex="0" means that the element should be focusable in sequential keyboard navigation, but its order is defined by the document's source order.

如果您愿意，也可以通过更改索引值来使用不同的顺序。

生成的单选按钮选项卡

Generated Radio Button Tab

.net

html

javascript

c#

user-experience