Vue表单输入框不支持focus及blur怎么办,如何处理
Admin 2022-06-02 群英技术资�
采用指令的方式来解决这个问题(此处的前端框架以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框自动聚焦�
记录一下,以备以后忘了好找�
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
这篇文章给大家分享的是jQuery设置修改z-index的值的方法。在jQuery中,我们可以使用css()或attr()方法来修改元素的值,文中的示例代码介绍得很详细,有需要的朋友可以参考,接下来就跟随小编一起了解看看吧�
这篇文章主要介绍了uni-app 的生命周期,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价�,需要的朋友可以参考下
substr() 方法substr() 方法可在字符串中抽取� start 下标开始的指定数目的字符。stringObject.substr(start,length)start:必需。要抽取的子串的起始下标。必须是数值。如
最近再做个项目,需要检查token过期,跳转到登录页面,要求用户重新登录,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一�
我们在做分享页面的时候,会需要使用到vue浏览器返回监听,这样可以实现用户分享完页面之后,回退按钮返回到首页功能,达到实现增加访问量的目的。但是vue浏览器返回监听具体要怎么做呢?下面我们一起来了解一下实现步骤�
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所�
增值电信经营许可证 : B1.B2-20140078