vue 表单输入框不支持focus及blur事件的解决方案

2022-07-27,,,,

采用指令的方式来解决这个问题(此处的前端框架以mint-ui为例):

1.html引用: v-mtfocus

2.在实例中添加指令

补充知识:vue中实现点击按钮使input显示的同时获取焦点

需求说明:点击搜索按钮出现input框,并自动使input框聚焦。

如图所示:

实现方式1:利用vue的ref

html代码如下:

js代码如下:

重点:只需要把需要的操作放在$nexttick内即可。

实现方式2:利用js(原理其实等同于方式1)

js代码如下:

说明:必须在$nexttick内使用方法是因为:dom更新的先后顺序的问题,不是所有的数据改变一定会触发dom的更新,而在修改数据之后立即使用这个方法,可以获取更新后的 dom。

误区:直接使用autofocus

html:

js:

这样的写法只在第一次时起作用,如果点击取消后再次点击搜索按钮则不会再次使input框自动聚焦。

记录一下,以备以后忘了好找。

以上这篇vue 表单输入框不支持focus及blur事件解决方案就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

《vue 表单输入框不支持focus及blur事件的解决方案.doc》

下载本文的Word格式文档,以方便收藏与打印。