采用指令的方式来解决这个问题(此处的前端框架以mint-ui为例):
1.html引用: v-mtfocus
2.在实例中添加指令
directives: { 'mtfocus' (el, binding, vnode) { let mtinput = el.querySelector('input') mtinput.onfocus = function () { ...//如果要对节点的数据进行更改,且更改要映射到页面上,则更改可在vnode.context上进行,这样,改完之后,改变就会映射到页面 } mtinput.onblur = function () { ...//同上理 } } }
补充知识:vue中实现点击按钮使input显示的同时获取焦点
需求说明:点击搜索按钮出现input框,并自动使input框聚焦。
如图所示:
实现方式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事件的解决方案就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月23日
2024年09月23日
- 洪荣宏1981-歹路不可行·相思雨(飞跃复刻版)[光美][WAV+CUE]
- 旅行团2015-10Day’s[来福胶泥][WAV+CUE]
- 龙千玉.2011-卡将哟【豪记】【WAV+CUE】
- 蔣志光.1993-多情多寂寞(国专)【BMG】【WAV+CUE】
- 陈慧娴.1996-雪映美白96演唱会2CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】
- 王子异《1996 Part.2》[FLAC/分轨][50.66MB]
- 贵族音乐《古典名曲与轻音乐钢琴 打开宝宝睡眠开关》[320K/MP3][155.91MB]
- 贵族音乐《古典名曲与轻音乐钢琴 打开宝宝睡眠开关》[FLAC/分轨][251.78MB]
- 黄韵玲2001-巴结音乐[全员集合][WAV+CUE]
- 郑绪岚2015-流金岁月·精选[首版][WAV+CUE]
- 周冰倩1995《沧桑情歌》JVC日本录制[WAV+CUE]
- 辛禄乐队.2024-热烈的少年【星辰】【FLAC分轨】
- 成龙.1996-龙的心【滚石】【WAV+CUE】
- 童安格.1991-一世情缘【宝丽金】【WAV+CUE】
- 韩红2010-擦肩而过[央金玛][WAV+CUE]