tabindex属性的作用

tabindex有三个值:0 ,-1, 以及X(X里32767是界点,稍后说明)

原本在Html中,只有链接a和表单元素可以被键盘访问(即使是a也必须加上href属性才可以),但是aria允许tabindex指定给任何html元素。

当tabindex=0时,该元素可以用tab键获取焦点,且访问的顺序是按照元素在文档中的顺序来focus,即使采用了浮动改变了页面中显示的顺序,依然是按照html文档中的顺序来定位。

当tabindex=-1时,该元素用tab键获取不到焦点,但是可以通过js获取,这样就便于我们通过js设置上下左右键的响应事件来focus,在widget内部可以用到。

当tabindex>=1时,该元素可以用tab键获取焦点,而且优先级大于tabindex=0;不过在tabindex>=1时,数字越小,越先定位到。

在IE中,tabindex范围在1到32767之间(包括32767),在FF, Chrome无限制,不过一旦超出32768,顺序跟tabindex=0时一样。这个估计跟各个浏览器对int型的解析有关。

点击打开链接

补充说明:学习bootstrap的modal时,用到了该属性。


本文来自 hellogjq 的CSDN 博客 ,全文地址请点击:https://blog.csdn.net/u012698342/article/details/70045568?utm_source=copy

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1 前 言 tabindex 指示其元素是否可以聚焦,以及它是否/在何处参与顺序键盘导航。 本篇将介绍 tabin...
    xrkffgg阅读 5,592评论 0 0
  • class 定义元素的类名。 注意:这是一个很重要的段落。 :) contenteditable 规定是否可编辑元...
    0981b16f19c7阅读 266评论 0 0
  • 主要内容 1 .实际功能就是父组件点击弹出一个隐藏的下拉框,点击选择元素,还可以按鼠标上下键切换选项。2 .这个其...
    skoll阅读 638评论 0 0
  • 最近朋友圈被《前任3》刷爆了,大概每一个的青春里都会有那么一个人藏在记忆深处,后来的日子每每回味起来就像巧克力...
    霁月姗姗阅读 410评论 0 0
  • 上周日妈妈爸爸带我去动物园,动物园里有许多动物,有上蹿下跳的黑猩猩、乱蹦乱跳的小猴子,美丽高贵的孔雀。 还喂...
    舍予亦阅读 103评论 0 0

友情链接更多精彩内容