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项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 Vue.js
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
vue 计算属性和侦听器的使用小结
Jan 25 Vue.js
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
Vue中避免滥用this去读取data中数据
Mar 02 Vue.js
Vue vee-validate插件的简单使用
Jun 22 Vue.js
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 Vue.js
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
Apr 11 Vue.js
VUE解决跨域问题Access to XMLHttpRequest at
May 06 Vue.js
vue实现登陆页面开发实践
May 30 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下防止单引号,双引号在接受页面转义的设置方法
2008/09/25 PHP
一个PHP缓存类代码(附详细说明)
2011/06/09 PHP
php笔记之:文章中图片处理的使用
2013/04/26 PHP
PHP文件锁定写入实例解析
2014/07/14 PHP
PHP学习笔记(二) 了解PHP的基本语法以及目录结构
2014/08/04 PHP
php实现求相对时间函数
2015/06/15 PHP
基于jquery用于查询操作的实现代码
2010/05/10 Javascript
jquery序列化表单去除指定元素示例代码
2014/04/10 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
2014/10/14 Javascript
javascript进行四舍五入方法汇总
2014/12/16 Javascript
NodeJS使用七牛云存储上传文件的方法
2017/07/24 NodeJs
jQuery实现对网页节点的增删改查功能示例
2017/09/18 jQuery
Angular 作用域scope的具体使用
2017/12/11 Javascript
Vue修改mint-ui默认样式的方法
2018/02/03 Javascript
webpack@v4升级踩坑(小结)
2018/10/08 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
2019/01/27 Javascript
原生JS实现动态添加新元素、删除元素方法
2019/05/05 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
2019/10/15 Javascript
Python命名空间详解
2014/08/18 Python
python获得linux下所有挂载点(mount points)的方法
2015/04/29 Python
python利用正则表达式排除集合中字符的功能示例
2017/10/10 Python
python+selenium打印当前页面的titl和url方法
2018/06/22 Python
python Tkinter的图片刷新实例
2019/06/14 Python
Python+OpenCV检测灯光亮点的实现方法
2020/11/02 Python
CSS3制作气泡对话框的实例教程
2016/05/10 HTML / CSS
基于HTML5 Canvas的3D动态Chart图表的示例
2017/11/02 HTML / CSS
师范应届生求职信
2013/11/15 职场文书
外国人聘用意向书
2014/04/01 职场文书
还款承诺书范文
2014/05/20 职场文书
基层领导干部“四风”问题批评与自我批评
2014/09/23 职场文书
倡议书范文大全
2015/04/28 职场文书
入党转正申请报告
2015/05/15 职场文书
欠款证明
2015/06/24 职场文书
女方家长婚礼致辞
2015/07/27 职场文书
大学新生入学感想
2015/08/07 职场文书
前端JS获取URL参数的4种方法总结
2022/04/05 Javascript