Skip to content

让div标签支持focus/blur事件

349字约1分钟

Vue

2023-7-27

为实现一个类似 select 下拉选择框效果,想到用 clickblur 事件来处理,但在实践过程中发现 div 正常情况下是无法获得焦点的。

后来知道了需要添加 tabindex 属性。
tabindex 全局属性指示其元素是否可以聚焦,以及它是否/在何处参与顺序键盘导航(通常使用Tab键,因此得名)。 下面是MDN社区tabindex 属性值的说明:

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

因此要让 div 支持 focus/blur 事件只需添加 tabindex 属性:

<div tabindex="-1" @click="Fn" @blur="Fn"></div>