html - 如何在专注于具有 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 设置为 label 。相反，只将 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">