其他分享
首页 > 其他分享> > vue项目使用tabIndex给dom添加键盘事件

vue项目使用tabIndex给dom添加键盘事件

作者:互联网

在vue项目中,我们通常只能给能获取焦点的表单元素绑定键盘事件,例如给div,img等标签绑定@keydown.left、@keydown.rigth都是无效的,查了一些资料,发现是要设置属性tabIndex。

一、tabIndex定义

tabindex 属性规定当使用 "tab" 键进行导航时元素的顺序。

在 HTML5 中, tabindex 属性可用于任何的 HTML 元素。

在 HTML 4.01中, tabindex 属性可用于: <a>, <area>, <button>, <input>, <object>, <select>, 和 <textarea>

二、tabIndex的使用

tabIndex="-1": 元素可聚焦,但不能通过tab导航到改元素;

tabIndex="0": 元素可聚焦,能通过tab导航到改元素;

tabIndex大于0: 元素可聚焦,可通过tab导航到改元素,数值为tab键控制次序。

例如: 在页面中按tab键会先导航到javascript,再导航到html,最后导航到css

 

<div tabindex="2">html</div><br />
<div tabindex="1">javascript</div><br />
<div tabindex="3">css</div>

三、tabIndex样式

使用tabIndex属性时,dom元素会被加上一个丑丑的黑框,这是因为自动加上了样式  :focus-visible {outline: -webkit-focus-ring-color auto 1px;}

解决方案:设置 :focus-visible {outline: 0;}



标签:vue,dom,元素,focus,tab,属性,导航,tabIndex
来源: https://www.cnblogs.com/reminiscexu/p/15984476.html