访问隐藏的输入元素

Question

我的问题： 如何通过选项卡访问隐藏的输入元素？

详细说明：

在我的网站上，对于单选按钮，我设置了可见性，并自定义了before元素以获得自定义设计。

问题是，当我尝试通过选项卡访问输入类型无线电时，我无法进行此操作，因为隐藏了可见性。

那么，任何人都可以建议我如何使用标签访问隐藏的输入元素吗？

网站

Demo Form

请访问上面的链接，你会在那里找到一个表格。现在，请尝试使用选项卡访问单选按钮。它会跳过单选按钮。

Answer 1

您必须在标签流中添加一项支持tabindex的项目，并且因为您的单选按钮被隐藏而无效。 锚标记确实支持标签索引，因此您可以使用a标记包装每个li标记的内部元素，并为其指定适用于您的流程的tabindex。

更改：

<li tabindex="0" class="radio gchoice_2_14_0">
    <input style="margin-left:1px;" name="input_14" type="radio" value="2017/2018" id="choice_2_14_0" onclick="gf_apply_rules(2,[0]);" onkeypress="gf_apply_rules(2,[0]);">
    <label tabindex="0" for="choice_2_14_0" id="label_2_14_0">2017/2018
    </label>
</li>

要

<li tabindex="0" class="radio gchoice_2_14_0">
    <a tabindex="1010">
        <input style="margin-left:1px;" name="input_14" type="radio" value="2017/2018" id="choice_2_14_0" onclick="gf_apply_rules(2,[0]);" onkeypress="gf_apply_rules(2,[0]);">
        <label tabindex="0" for="choice_2_14_0" id="label_2_14_0">2017/2018
        </label>
    </a>
</li>

当你选中它时，这会给锚标签聚焦（假设前一个元素的tabindex是'1009'或更低）。

这回答了关于如何选择它的问题。既然你有这个，你需要做几件事：

1. 根据需要为form li.radio a:focus设置元素的css样式。
2. 为a元素设置按键事件，以便您可以在聚焦时按回车键实际选择虚假的单选按钮。