vue 表單輸入框不支持focus及blur事件的解決方案
更新時間：2020年11月17日 15:19:03 作者：WX_安琪拉打野怪
這篇文章主要介紹了vue 表單輸入框不支持focus及blur事件的解決方案，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
采用指令的方式來解決這個問題(此處的前端框架以mint-ui為例):
1.html引用: v-mtfocus
2.在實例中添加指令
directives: {
'mtfocus' (el, binding, vnode) {
let mtinput = el.querySelector('input')
mtinput.onfocus = function () {
...//如果要對節(jié)點的數(shù)據(jù)進行更改,且更改要映射到頁面上,則更改可在vnode.context上進行,這樣,改完之后,改變就會映射到頁面
}
mtinput.onblur = function () {
...//同上理
}
}
}
補充知識：vue中實現(xiàn)點擊按鈕使input顯示的同時獲取焦點
需求說明：點擊搜索按鈕出現(xiàn)input框，并自動使input框聚焦。
如圖所示：
實現(xiàn)方式1：利用vue的ref
html代碼如下：
<input ref="inputVal" class="searchInp" type="text" v-model="searchVal" placeholder="搜索標題或內(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()
})
},
重點：只需要把需要的操作放在$nextTick內(nèi)即可。
實現(xiàn)方式2：利用js（原理其實等同于方式1）
<input id="inputVal" class="searchInp" type="text" v-model="searchVal" placeholder="搜索標題或內(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)使用方法是因為：dom更新的先后順序的問題，不是所有的數(shù)據(jù)改變一定會觸發(fā)dom的更新，而在修改數(shù)據(jù)之后立即使用這個方法，可以獲取更新后的 dom。
誤區(qū)：直接使用autofocus
html：
<input v-bind:autofocus="!searchBtnFlag" class="searchInp" type="text" v-model="searchVal" placeholder="搜索標題或內(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();
})
},
這樣的寫法只在第一次時起作用，如果點擊取消后再次點擊搜索按鈕則不會再次使input框自動聚焦。
記錄一下，以備以后忘了好找。
以上這篇vue 表單輸入框不支持focus及blur事件的解決方案就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue的transition-group與Virtual Dom Diff算法的使用
這篇文章主要介紹了Vue的transition-group與Virtual Dom Diff算法的使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-12-12
Vue $router.push打開新窗口的實現(xiàn)方法
在Vue中,$router.push方法默認不支持在新窗口中打開頁面,但通過結(jié)合window.open方法和$router.resolve方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-09-09
詳解vue + vuex + directives實現(xiàn)權(quán)限按鈕的思路
這篇文章主要介紹了詳解vue + vuex + directives實現(xiàn)權(quán)限按鈕的思路，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
今天小編就為大家分享一篇vue 實現(xiàn)特定條件下綁定事件，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
最近項目中多次用到了Popover彈出框,下面這篇文章主要給大家介紹了關(guān)于el-popover如何通過js手動控制彈出框顯示、隱藏的相關(guān)資料,需要的朋友可以參考下2023-12-12
這篇文章主要給大家介紹了關(guān)于Vue精美簡潔登錄頁完整代碼的相關(guān)資料,通過文中的方法大家可以使用實現(xiàn)簡單的用戶登錄界面,下面通過示例代碼介紹的非常詳細,需要的朋友可以參考下2023-07-07
在這篇文章中,我們將學習一下 Vue3 的全局組件注冊是如何實現(xiàn)的,文中通過代碼示例給大家介紹的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2023-12-12
針對Vue文檔中部分大家可能不會去研讀的內(nèi)容，這篇文章主要介紹了詳解Vue文檔中幾個易忽視部分的剖析，非常具有實用價值，需要的朋友可以參考下2018-03-03
Object.assign觸發(fā)watch原理示例解析
這篇文章主要為大家介紹了Object.assign觸發(fā)watch原理示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
這篇文章主要介紹了vue實現(xiàn)登錄注冊模板的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-04-04