阅读本文您将收获
前言
document.querySelector("a").focus();
tabindex的作用
tabindex的范围tabindex理论上可以使用在几乎所有元素上
tabindex 有三个值:0,-N(通常是-1),N(正值)
tabindex的使用tabindex 决定聚焦顺序
// HTML <button type="button" tabindex="1">tabindex === 1</button> <button type="button" tabindex="999">tabindex === 999</button> <button type="button" tabindex="0">tabindex === 0</button>
// HTML <button type="button" tabindex="0">tabindex === 0</button> <button type="button" tabindex="1">tabindex === 1</button> <button type="button" tabindex="999">tabindex === 999</button> <button type="button" tabindex="0">tabindex === 0</button>
tabindex 决定是否聚焦
// HTML <button type="button">未设置tabindex</button> <button type="button" tabindex="-1">tabindex === -1</button> <button type="button" tabindex="0">tabindex === 0</button> <button type="button" tabindex="1">tabindex === 1</button>
tabindex 与JS编程聚焦
// HTML <button type="button" @click="clickBtn()">点击让DIV聚焦</button> <div id="FocusDiv" ref="FocusDiv" tabindex="-1">这是一个div</div> // JS clickBtn: function() { document.getElementById('FocusDiv').focus(); }
如何利用 tabindex 创造更好的用户体验针对自定义标签进行富交互优化
针对特定节点禁止聚焦操作
复杂列表控制聚焦顺序
写在最后如果你觉得这篇文章对你有益,烦请点赞以及分享给更多需要的人! 快到碗里来!百度校招还有HC!甩简历来! 极速直接内推【字节跳动】&【百度】&【猿辅导】&【京东】 |
|
来自: python_lover > 《待分类》