vue 表單輸入框不支援focus及blur事件的解決方案
阿新 • • 發佈:2020-11-18
採用指令的方式來解決這個問題(此處的前端框架以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事件的解決方案就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。