html - 访问隐藏的输入元素

Question

我的问题: 如何通过标签访问隐藏的输入元素？

详细解释:

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

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

那么，谁能建议我如何使用选项卡访问隐藏的输入元素？

网站

Demo Form

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

Answer 1

您的选项卡流中必须有一个支持 tabindex 的元素，并且由于您的单选按钮被隐藏，因此无法使用。 anchor 标签 确实支持标签索引，因此您可以使用 a 标签包装每个 li 标签的内部元素，并为其分配一个适用于您的标签索引流...

变化:

<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>

当您使用 Tab 键指向它时，这将使 anchor 标记获得焦点(假设前一个元素的 tabindex 为“1009”或更低)。

这回答了您关于如何切换到它的问题。现在你已经有了，你需要做几件事:

1. 按照您认为合适的方式为 form li.radio a:focus 设置元素的 css 样式。
2. 为 a 元素设置按键事件，这样您就可以在它获得焦点时通过按下 enter 键实际选择假单选按钮。