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;}