我正在尝试用图标替换复选框/无线电输入.为此,我需要隐藏原始复选框/收音机.问题是,我还希望表单能够正确支持键盘输入,即让输入通过Tab键保持可聚焦并可选择使用Spacebar.由于我隐藏了输入,因此无法集中注意力,所以相反,我试图使其<label>可聚焦.
这个文档和其他各种来源使我相信我可以使用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代码只允许看到正确点击标签(联合国)检查复选框.)
html5 ×1