vue 表單輸入框不支持focus及blur事件的解決方案
采用指令的方式來解決這個(gè)問題(此處的前端框架以mint-ui為例):
1.html引用: v-mtfocus
2.在實(shí)例中添加指令
directives: {
'mtfocus' (el, binding, vnode) {
let mtinput = el.querySelector('input')
mtinput.onfocus = function () {
...//如果要對節(jié)點(diǎn)的數(shù)據(jù)進(jìn)行更改,且更改要映射到頁面上,則更改可在vnode.context上進(jìn)行,這樣,改完之后,改變就會(huì)映射到頁面
}
mtinput.onblur = function () {
...//同上理
}
}
}
補(bǔ)充知識(shí)：vue中實(shí)現(xiàn)點(diǎn)擊按鈕使input顯示的同時(shí)獲取焦點(diǎn)
需求說明：點(diǎn)擊搜索按鈕出現(xiàn)input框，并自動(dòng)使input框聚焦。
如圖所示：
實(shí)現(xiàn)方式1：利用vue的ref
html代碼如下：
<input ref="inputVal" class="searchInp" type="text" v-model="searchVal" placeholder="搜索標(biāo)題或內(nèi)容..." /> <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()
})
},
重點(diǎn)：只需要把需要的操作放在$nextTick內(nèi)即可。
實(shí)現(xiàn)方式2：利用js（原理其實(shí)等同于方式1）
<input id="inputVal" class="searchInp" type="text" v-model="searchVal" placeholder="搜索標(biāo)題或內(nèi)容..." /> <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內(nèi)使用方法是因?yàn)椋篸om更新的先后順序的問題，不是所有的數(shù)據(jù)改變一定會(huì)觸發(fā)dom的更新，而在修改數(shù)據(jù)之后立即使用這個(gè)方法，可以獲取更新后的 dom。
誤區(qū)：直接使用autofocus
html：
<input v-bind:autofocus="!searchBtnFlag" class="searchInp" type="text" v-model="searchVal" placeholder="搜索標(biāo)題或內(nèi)容..." /> <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();
})
},
這樣的寫法只在第一次時(shí)起作用，如果點(diǎn)擊取消后再次點(diǎn)擊搜索按鈕則不會(huì)再次使input框自動(dòng)聚焦。
記錄一下，以備以后忘了好找。
以上這篇vue 表單輸入框不支持focus及blur事件的解決方案就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue.js 2.0 移動(dòng)端拍照壓縮圖片預(yù)覽及上傳實(shí)例
這篇文章主要介紹了Vue.js 2.0 移動(dòng)端拍照壓縮圖片預(yù)覽及上傳實(shí)例，本來移動(dòng)端開發(fā)H5應(yīng)用，準(zhǔn)備將mui框架和Vue.js+vue-router+vuex 全家桶結(jié)合起來使用2017-04-04
下面小編就為大家?guī)硪黄獪\談vue-router2路由參數(shù)注意的問題。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了Vue3中使用setup通過ref獲取子組件的屬性，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
vue使用axios實(shí)現(xiàn)文件上傳進(jìn)度的實(shí)時(shí)更新詳解
最近在學(xué)習(xí)axios，然后項(xiàng)目就用到了，所以這篇文章主要給大家介紹了關(guān)于vue中利用axios實(shí)現(xiàn)文件上傳進(jìn)度的實(shí)時(shí)更新的相關(guān)資料，文中先對axios進(jìn)行了簡單的介紹，方法大家理解學(xué)習(xí)，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
ejsExcel模板在Vue.js項(xiàng)目中的實(shí)際運(yùn)用
這篇文章主要介紹了ejsExcel模板在Vue.js項(xiàng)目中的實(shí)際運(yùn)用,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
解決element-ui庫的el-row的gutter=10間距失效問題
這篇文章主要介紹了解決element-ui庫的el-row的gutter=10間距失效問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
Vue.js 是一套構(gòu)建用戶界面的框架，**只關(guān)注視圖層**，它不僅易于上手，還便于與第三方庫或既有項(xiàng)目整合。這篇文章主要介紹了vue 的基本語法和常用指令,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了Vue子組件向父組件傳值方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-03-03
詳解mpvue scroll-view自動(dòng)回彈bug解決方案
設(shè)置了scroll-top的scroll-view組件，在組件所在vue實(shí)例data發(fā)生改變時(shí)會(huì)自動(dòng)回彈到最上方，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-10-10
這篇文章主要介紹了vue接口請求加密實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08