如何在关注具有tabindex的标签时按空格来切换复选框？

Question

我在html中广泛使用与复选框输入相关的标签。它允许用户单击宽标签并获得他想要的内容-复选框切换。我想通过Space在关注标签时按下切换复选框来实现类似的行为。为了使标签聚焦，我添加tabindex="0"了标签。我也不希望复选框具有焦点，因此我要添加tabindex="-1"输入。

这是两个示例，一个使用标签标签包装，另一个使用for属性。

<input type="button" value="Click then press tab." /><br/>
<label tabindex="0">Accept terms <input type="checkbox" tabindex="-1"/></label><br/>
<label for="MyCheckbox" tabindex="0">Accept terms</label> <input type="checkbox" id="MyCheckbox" tabindex="-1"/>

我对无需任何JavaScript即可实现预期行为的可能性感兴趣。

Answer 1

我认为你根本不应该将 tabindex 设置为标签。相反，仅将 tabindex 设置为复选框并将其放置在标签之外。在 Safari 上适用于我。

<input type="button" value="Click then press tab"><br>
<label for="myCheckbox">This is label</label>
<input type="checkbox" id="myCheckbox" tabindex="0">