通过按空格同时关注具有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">