html - tabIndex 不会使用 Tab 键使标签可聚焦

Question

我正在尝试用图标替换复选框/ radio 输入。为此，我需要隐藏原始复选框/ radio 。问题是，我还希望表单正确支持键盘输入，即让输入保持可聚焦 Tab键和可选择使用 Spacebar .由于我隐藏了输入，因此无法聚焦，因此，我试图使其 <label>可聚焦。

This documentation和其他各种来源让我相信我可以使用 tabindex 做到这一点。属性(对应于 HTMLElement.tabIndex 属性)。但是，当我尝试分配 tabindex 时对于我的标签，它仍然像以前一样没有重点，无论我多么努力Tab到它。

为什么不tabindex使标签可聚焦？

以下代码段演示了该问题。如果您用鼠标聚焦输入并尝试使用 Tab 聚焦标签，它不起作用(它关注以下 <span> 和 tabindex)。

document.getElementById('checkbox').addEventListener('change', function (event) {
  document.getElementById('val').innerHTML = event.target.checked;
});

<div>
  <input type="text" value="input">
</div>
<div>
  <label tabindex="0">
    <input type="checkbox" id="checkbox" style="display:none;">
    checkbox: <span id="val">false</span>
  </label>
</div>
<span tabindex="0">span with tabindex</span>

(JavaScript 代码只允许看到正确单击标签(取消)选中复选框。)

Answer 1

Why doesn't tabindex make the label focusable?

简答 :

标签是可聚焦的。

TabIndex 不会有任何区别。

欢迎来到浏览器/代理不一致的世界。

tl;博士;
label (Ref) element 是非常可聚焦的。它的 DOM 接口(interface)是 HTMLLabelElement源自 HTMLElement (Ref)依次实现 GlobalEventHandlers (Ref)因此暴露了 focus()方法和 onfocus事件处理程序。

您无法获得label 的正确规范/引用文档的原因s 焦点行为，是因为您可能一直在查看 HTML5 规范。有趣的是，HTML5 refs 没有说明任何与此相关的内容，这增加了混淆。

这在 HTML 4.01 Ref 中提到:http://www.w3.org/TR/html401/interact/forms.html#h-17.9.1

特别是在第 17.9.1 节末尾和 17.10 节之前:

When a LABEL element receives focus, it passes the focus on to its associated control.

另外，在其他地方(我无法掌握 ref 的那部分)，我读到这取决于执行代理。 (不要相信我的话，我不太确定)。

然而，这意味着当你focus label (或 label 收到 focus )，即 focus传递给其相关的可标记控件。这不会导致两个不同的 focus es，但是一个 focus在 input (在您的情况下是一个复选框)。由于这种行为，tabindex属性(property)不能发挥作用。

W3C 还提供了一个用于网站可访问性 (WAAG) 的测试套件:http://www.w3.org/WAI/UA/TS/html401/cp0102/0102-ONFOCUS-ONBLUR-LABEL.html其中，讨论了 onfocus 的实现和 onblur对于 label .理想情况下，键盘或模拟键盘的辅助技术应该实现这一点。但...

这就是浏览器不一致发挥作用的地方。

这可以通过这个例子来证明。在不同的浏览器中检查以下代码段。 (我已经针对 IE-11、GC-39 和 FF-34 对其进行了测试。它们的行为都不同。)

单击“焦点标签”按钮

它应该聚焦标签，然后传递焦点并以蓝色突出显示其关联的复选框轮廓。

Chrome-v39 有效。 IE-v11 没有(不知何故 html 和 body 确实响应:focus)。 FF-v34 它有效。

谈到浏览器的不一致，请尝试使用“访问键”L。一些浏览器会聚焦复选框，而有些浏览器会点击它，即将操作传递给它。

这是一个 fiddle 测试一下:http://jsfiddle.net/abhitalks/ff0xds4z/2/

这是一个 片段 :

label = $("label").first();
$("#btn").on("click", function() {
    label.focus();
});

* { margin: 8px; }
.highlight { background-color: yellow; }
:focus {
    outline: 2px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="txt" type="text" value="input" /><br />
<label for="chk" accesskey="L">Checkbox: </label>
<input id="chk" type="checkbox" /><br />
<input id="btn" type="button" value="Focus Label" />

希望能解开你的疑惑。

.

你的问题:

现在 focus唱(原文如此)关于无法聚焦标签的原始问题，因为您想通过在其位置放置图标类的东西来以不同的方式设置复选框的样式。

为此，您的一个选择是 不是 通过执行 display:none; 完全隐藏它.相反，将其设为 1x1 像素并将其推到您的图标下方。这样，它仍然会自然地获得焦点，但仍会被有效地隐藏起来。

例如，如果您的图标是一个复选标记和一个叉号，则更改复选框的位置并将图标变为 ::before或 ::after标签上的伪元素。这将导致复选框仍然获得焦点，并使图标对此做出响应。这会给图标带来焦点的明显错觉。

演示 fiddle :http://jsfiddle.net/abhitalks/v0vxcw77/

片段 :

div.chkGroup { position: relative; }
input#chk {
    position: absolute;
    width: 1px; height: 1px;
    margin: 0; margin-top: 4px; outline: none;
    border: 1px solid transparent; background-color: transparent;
}
label::before {
    content: '\2714';
    position: relative;
    width: 18px; height: 18px;
    background-color: #fff;
    margin-right: 8px; padding: 2px;
    display: inline-block; 
    border: 1px solid transparent;
}
input#chk:checked + label::before {
    content: '\2716';
}
input#chk:focus + label::before {
    border: 1px solid #00f;
}

<input id="txt" type="text" value="input" /><br /><br />
<div class="chkGroup">
    <input id="chk" type="checkbox" />
    <label for="chk" accesskey="L">Checkbox</label>
</div>

.