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的hash值原理也是table切换实例代码
Dec 14 Vue.js
vue3中轻松实现switch功能组件的全过程
Jan 07 Vue.js
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 Vue.js
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
关于vue中如何监听数组变化
Apr 28 Vue.js
vue+echarts实现多条折线图
Mar 21 Vue.js
一起来看看Vue的核心原理剖析
Mar 24 Vue.js
vue3不同环境下实现配置代理
May 25 Vue.js
vue router 动态路由清除方式
May 25 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
从一个不错的留言本弄的mysql数据库操作类
2007/09/02 PHP
PHP 递归效率分析
2009/11/24 PHP
Zend Framework教程之配置文件application.ini解析
2016/03/10 PHP
PHP Redis扩展无法加载的问题解决方法
2019/08/22 PHP
fix-ie5.js扩展在IE5下不能使用的几个方法
2007/08/20 Javascript
Javascript学习笔记4 Eval函数
2010/01/11 Javascript
JS焦点图切换,上下翻转
2011/05/12 Javascript
javascript date格式化示例
2013/09/25 Javascript
删除节点的jquery代码
2014/01/13 Javascript
JS实现网页表格自动变大缩小的方法
2015/03/09 Javascript
RequireJS多页面应用实例分析
2016/06/29 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
2016/11/29 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
2017/01/22 Javascript
微信小程序实现联动选择器
2019/02/15 Javascript
浅谈小程序globalData的那些事儿
2019/11/01 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
2020/08/14 Javascript
[42:52]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
python开发之IDEL(Python GUI)的使用方法图文详解
2015/11/12 Python
Python设计实现的计算器功能完整实例
2017/08/18 Python
python 获取文件下所有文件或目录os.walk()的实例
2018/04/23 Python
Python 判断图像是否读取成功的方法
2019/01/26 Python
Python对象转换为json的方法步骤
2019/04/25 Python
详解python中的线程与线程池
2019/05/10 Python
详解Python3 pandas.merge用法
2019/09/05 Python
Python OrderedDict字典排序方法详解
2020/05/21 Python
Pytorch 使用CNN图像分类的实现
2020/06/16 Python
简单掌握CSS3将文字描边及填充文字颜色的方法
2016/03/07 HTML / CSS
推荐一些比较有用的css3新属性
2014/11/11 HTML / CSS
美国室内和室外装饰花盆购物网站:ePlanters
2019/03/22 全球购物
高中运动会广播稿
2014/01/21 职场文书
选秀节目策划方案
2014/06/06 职场文书
幼儿园教师的自我评价范文
2014/09/17 职场文书
学习三严三实对照检查材料思想汇报
2014/09/22 职场文书
公司表扬信格式
2015/05/04 职场文书
给老婆的检讨书(搞笑版)
2015/05/06 职场文书
MySQL 数据表操作
2022/05/04 MySQL