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


Posted in Vue.js onNovember 17, 2020

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

1.html引用: v-mtfocus

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

2.在实例中添加指令

directives: {
  'mtfocus' (el, binding, vnode) {
   let mtinput = el.querySelector('input')
   mtinput.onfocus = function () {
    ...//如果要对节点的数据进行更改,且更改要映射到页面上,则更改可在vnode.context上进行,这样,改完之后,改变就会映射到页面
   }
   mtinput.onblur = function () {
    ...//同上理
   }
  } 
 }

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

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

如图所示:

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

实现方式1:利用vue的ref

html代码如下:

<input ref="inputVal" class="searchInp" type="text" v-model="searchVal" placeholder="搜索标题或内容..." />
<div v-show="searchBtnFlag" class="searchBtn" @click="searchIn">
 <i class="iconfont icon-search1187938easyiconnet"></i> 搜索
</div>

Js代码如下:

searchIn(){
 this.searchBtnFlag = !this.searchBtnFlag;
 this.$nextTick(function () {
  //DOM 更新了
  this.$refs.inputVal.focus()
 })
},

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

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

<input id="inputVal" class="searchInp" type="text" v-model="searchVal" placeholder="搜索标题或内容..." />
<div v-show="searchBtnFlag" class="searchBtn" @click="searchIn">
 <i class="iconfont icon-search1187938easyiconnet"></i> 搜索
</div>

Js代码如下:

searchIn(){
 this.searchBtnFlag = !this.searchBtnFlag;
 this.$nextTick(function () {
 document.getElementById("inputVal").focus();
 })
},

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

误区:直接使用autofocus

html:

<input v-bind:autofocus="!searchBtnFlag" class="searchInp" type="text" v-model="searchVal" placeholder="搜索标题或内容..." />
<div v-show="searchBtnFlag" class="searchBtn" @click="searchIn">
  <i class="iconfont icon-search1187938easyiconnet"></i> 搜索
</div>

js:

searchIn(){
   this.searchBtnFlag = !this.searchBtnFlag;
   this.$nextTick(function () {
  document.getElementById("inputVal").focus();
   })
 },

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

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

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

Vue.js 相关文章推荐
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
Vue解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
Vue 简单实现前端权限控制的示例
Dec 25 Vue.js
vue+element table表格实现动态列筛选的示例代码
Jan 14 Vue.js
vue实现验证用户名是否可用
Jan 20 Vue.js
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
Vue SPA 首屏优化方案
Feb 26 Vue.js
Vue3中的Refs和Ref详情
Nov 11 Vue.js
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
vue实力踩坑之push当前页无效
Apr 10 Vue.js
详解Vue3使用axios的配置教程
Apr 29 Vue.js
解决vue elementUI 使用el-select 时 change事件的触发问题
Nov 17 #Vue.js
Vue项目利用axios请求接口下载excel
Nov 17 #Vue.js
vue实现下载文件流完整前后端代码
Nov 17 #Vue.js
vue+iview实现文件上传
Nov 17 #Vue.js
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 #Vue.js
vue+iview实现分页及查询功能
Nov 17 #Vue.js
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 #Vue.js
You might like
PHP 操作文件的一些FAQ总结
2009/02/12 PHP
windows服务器中检测PHP SSL是否开启以及开启SSL的方法
2014/04/25 PHP
支付宝接口开发集成支付环境小结
2015/03/17 PHP
PHP实现的DES加密解密封装类完整实例
2017/04/29 PHP
laravel migrate初学常见错误的解决方法
2017/10/11 PHP
Laravel框架定时任务2种实现方式示例
2018/12/08 PHP
jquery控制listbox中项的移动并排序
2009/11/12 Javascript
合并table相同单元格的jquery插件分享(很精简)
2011/06/20 Javascript
UI Events 用户界面事件
2012/06/27 Javascript
jquery实现瀑布流效果分享
2014/03/26 Javascript
Jquery弹出层插件ThickBox的使用方法
2014/12/09 Javascript
javascript 获取浏览器版本
2015/01/21 Javascript
JS中frameset框架弹出层实例代码
2016/04/01 Javascript
Js 获取、判断浏览器版本信息的简单方法
2016/08/08 Javascript
最丑的时钟效果!js canvas时钟制作方法
2016/08/15 Javascript
关于TypeScript中import JSON的正确姿势详解
2017/07/25 Javascript
jQuery Layer弹出层传值到父页面的实现代码
2017/08/17 jQuery
vue router导航守卫(router.beforeEach())的使用详解
2019/04/19 Javascript
socket在egg中的使用实例代码详解
2019/05/30 Javascript
基于python编写的微博应用
2014/10/17 Python
基于pytorch的lstm参数使用详解
2020/01/14 Python
django 利用Q对象与F对象进行查询的实现
2020/05/15 Python
用CSS3将你的设计带入下个高度
2009/08/08 HTML / CSS
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
2020/05/28 HTML / CSS
英国泰坦旅游网站:全球陪同游览,邮轮和铁路旅行
2016/11/29 全球购物
斐乐美国官方网站:FILA美国
2019/03/01 全球购物
资生堂英国官网:Shiseido英国
2020/12/30 全球购物
工程管理专业毕业生自荐信
2014/01/24 职场文书
公司薪酬管理制度
2014/01/31 职场文书
小学生演讲稿大全
2014/04/25 职场文书
迎国庆演讲稿
2014/09/15 职场文书
小石潭记导游词
2015/02/03 职场文书
学术会议通知
2015/04/15 职场文书
关于ObjectUtils.isEmpty() 和 null 的区别
2022/02/28 Java/Android
python中的getter与setter你了解吗
2022/03/24 Python
MySQL数据库之内置函数和自定义函数 function
2022/06/16 MySQL