html5 – tabIndex不使标签可使用Tab键进行聚焦

我试图用图标替换复选框/无线电输入。为此，我需要隐藏原始的复选框/收音机。问题是，我还希望表单正确地支持键盘输入，即让输入保持通过Tab键可聚焦，并使用空格键可选。因为我隐藏输入，它不能被聚焦，所以相反，我试图使其< label>可聚焦。

This documentation和各种其他来源使我相信我可以使用tabindex属性(对应于HTMLElement.tabIndex属性)。然而，当我尝试分配tabindex到我的标签，它仍然像以前一样未聚焦，但我尝试Tab到它。

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

以下代码段演示了该问题。如果您使用鼠标对输入进行聚焦，并尝试使用Tab聚焦标签，则无法使用(它会将以下< span>与标签索引对焦)。

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代码只是允许看到正确点击标签(un)会检查复选框。)

解决方法

Why doesn’t tabindex make the label focusable?

简答：

>标签是可聚焦的。
> TabIndex将没有任何区别。
>欢迎来到浏览器/代理不一致的世界。

tl; dr

标签 (Ref)元素是非常可聚焦的。它的DOM接口是HTMLLabelElement，它来自HTMLElement (Ref)，它又实现了GlobalEventHandlers (Ref)，因此暴露了focus()方法和onfocus事件处理程序。

您无法掌握适当的规范/参考文档的标签焦点行为的原因是因为您可能已经在看HTML5规格。有趣的是，HTML5引用不会说明与此相关的任何内容，这增加了混乱。

这在HTML 4.01参考这里：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的那部分)我已经阅读，这取决于实施代理。 (不要为我的话，我不太确定)。

然而，它的意思是，当你聚焦一个标签(或一个标签接受了焦点)，该焦点被传递到其相关的labeleable控件。这不会导致两个不同的焦点，但一个重点放在输入(在你的情况下复选框)。因为这种行为，tabindex属性不能起作用。

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

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

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

>点击按钮“聚焦标签”
>它应该聚焦标签，然后传递焦点，并突出显示其相关的复选框大纲为蓝色。
> Chrome-v39正常。 IE-v11它不(不知何故html和身体做出回应：焦点)。 FF-v34它工作。

谈论浏览器不一致，尝试使用“访问键”L.一些浏览器将集中的复选框，而一些将点击它，即传递动作到它。

这里是一个小提琴来测试它：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" />

希望能清除你的疑惑。

。

你的问题：

现在聚焦(原文如此)你无法聚焦标签的原始问题，因为你想通过放置一个图标种类的东西在它的位置不同的样式的复选框。

为了做到这一点，你的一个选择是不完全隐藏它做一个显示：none;相反，使其1×1像素，并推它在你的图标。这样，它仍然会自然接收焦点，但仍然被有效隐藏。

例如，如果您的图标是复选标记和十字，则更改复选框的位置，并使标记上的:: before或:: after伪元素出现。这将导致复选框仍然接收焦点，并使图标响应。这将给予图标取得焦点的明显错觉。

演示小提琴：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>

。

原文地址：https://www.jb51.cc/html5/169487.html

html5 – tabIndex不使标签可使用Tab键进行聚焦

解决方法

相关推荐