在vue环境实现div focus blur焦点事件

原创已于 2022-05-10 17:02:35 修改 · 6.8k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #html

于 2022-02-16 18:08:33 首次发布

前端专栏收录该内容

28 篇文章

订阅专栏

本文介绍了如何在Vue中正确处理input元素的onfocus和onblur事件，特别是在动态加载和移动端交互受限的情况。通过添加tabindex和hidefocus属性，以及使用setTimeout实现延迟聚焦，解决了焦点切换问题。

onfocus获取焦点事件与onblur失去焦点事件本身是input类用的

input类如果是点击后才加载的话需要做个延时器，否则会报错

setTimeout(()=>{
    this.$refs.aside.focus()
},100)

div想支持则需要加上tabindex="0"属性//0或者以上

但是在vue环境中，加上这个也不支持，而移动端无法使用鼠标事件

<div tabindex="0" hidefocus="true" ref="aside" class="aside" @click="dialaing()" @blur='()=>{dialaingIsShow =false}'>
    <div v-show="dialaingIsShow" class="dialaing">dsadasd</div>
</div>



dialaing(){
       this.$refs.aside.focus()
       this.dialaingIsShow = true
},

就可以了