首页 前端知识 tabindex属性介绍,让普通元素能够执行聚焦(foucs)和失焦(blur)事件

tabindex属性介绍,让普通元素能够执行聚焦(foucs)和失焦(blur)事件

2024-05-05 12:05:16 前端知识 前端哥 258 21 我要收藏

1.一个普通的div,如果加上tabindex属性,就可以执行focus和blur方法:

<div class="my-div" tabindex="-1" @focus='handle_focus' @blur="handle_blur"></div>

2.tebindex属性介绍:

tabindex 全局属性 指示其元素是否可以聚焦,以及它是否/在何处参与顺序键盘导航(通常使用Tab键,因此得名)

它接受一个整数作为值,具有不同的结果,具体取决于整数的值:

tabindex=负值 (通常是 tabindex=“-1”),表示元素是可聚焦的,但是不能通过键盘导航来访问到该元素,用 JS 做页面小组件内部键盘导航的时候非常有用。
tabindex=“0” ,表示元素是可聚焦的,并且可以通过键盘导航来聚焦到该元素,它的相对顺序是当前处于的 DOM 结构来决定的。
tabindex=正值,表示元素是可聚焦的,并且可以通过键盘导航来访问到该元素;它的相对顺序按照tabindex 的数值递增而滞后获焦。如果多个元素拥有相同的 tabindex,它们的相对顺序按照他们在当前 DOM 中的先后顺序决定。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/6892.html
标签
评论
发布的文章

String转Json的几种方式

2024-05-09 11:05:04

iOS ------ JSONModel源码

2024-05-09 11:05:02

java去除 json 中的 \n, \t, \r

2024-05-09 11:05:57

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!