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中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
vue监听滚动事件的方法
Dec 21 Vue.js
vue中watch的用法汇总
Dec 28 Vue.js
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
Vue 事件的$event参数=事件的值案例
Jan 29 Vue.js
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 Vue.js
vue css 相对路径导入问题级踩坑记录
Jun 05 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建立外键
2006/11/25 PHP
删除无限分类并同时删除它下面的所有子分类的方法
2010/08/08 PHP
PHP简单获取视频预览图的方法
2015/03/12 PHP
PHP设计模式之单例模式定义与用法分析
2019/03/26 PHP
PHP使用PDO、mysqli扩展实现与数据库交互操作详解
2019/07/20 PHP
PHP使用ajax的post方式下载excel文件简单示例
2019/08/06 PHP
原生js获取宽高与jquery获取宽高的方法关系对比
2014/04/04 Javascript
JS实现判断碰撞的方法
2015/02/11 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
2015/03/27 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
2016/01/27 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
2016/04/14 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
2016/05/07 Javascript
微信小程序 教程之条件渲染
2016/10/18 Javascript
基于JS实现仿百度百家主页的轮播图效果
2017/03/06 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
2019/04/08 Javascript
浏览器事件循环与vue nextTicket的实现
2019/04/16 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
2019/10/11 Javascript
Python写的英文字符大小写转换代码示例
2015/03/06 Python
Python函数的周期性执行实现方法
2016/08/13 Python
查看python下OpenCV版本的方法
2018/08/03 Python
对django中render()与render_to_response()的区别详解
2018/10/16 Python
Python二叉搜索树与双向链表转换算法示例
2019/03/02 Python
python GUI库图形界面开发之PyQt5 UI主线程与耗时线程分离详细方法实例
2020/02/26 Python
python继承threading.Thread实现有返回值的子类实例
2020/05/02 Python
草莓网化妆品加拿大网站:Strawberrynet Canada
2016/09/20 全球购物
viagogo波兰票务平台:演唱会、体育比赛、戏剧门票
2018/04/23 全球购物
Oakley西班牙官方商店:太阳眼镜和男女运动服
2019/04/26 全球购物
2014年元旦感言
2014/03/06 职场文书
体育系毕业生自荐信
2014/06/28 职场文书
群教个人对照检查材料
2014/08/20 职场文书
基层干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
高考作弊检讨书1500字
2015/02/16 职场文书
2015教师年度工作总结范文
2015/04/07 职场文书
超市员工辞职信范文
2015/05/12 职场文书
CSS3 制作精美的定价表
2021/04/06 HTML / CSS
python3使用diagrams绘制架构图的步骤
2021/04/08 Python