這篇文章主要介紹了vue 表單輸入框不支持focus及blur事件的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
采用指令的方式來(lái)解決這個(gè)問(wèn)題(此處的前端框架以mint-ui為例):
1.html引用: v-mtfocus
2.在實(shí)例中添加指令
directives: {
'mtfocus' (el, binding, vnode) {
let mtinput = el.querySelector('input')
mtinput.onfocus = function () {
...//如果要對(duì)節(jié)點(diǎn)的數(shù)據(jù)進(jìn)行更改,且更改要映射到頁(yè)面上,則更改可在vnode.context上進(jìn)行,這樣,改完之后,改變就會(huì)映射到頁(yè)面
}
mtinput.onblur = function () {
...//同上理
}
}
}
補(bǔ)充知識(shí)： vue中實(shí)現(xiàn)點(diǎn)擊按鈕使input顯示的同時(shí)獲取焦點(diǎn)
需求說(shuō)明：點(diǎn)擊搜索按鈕出現(xiàn)input框，并自動(dòng)使input框聚焦。
如圖所示：
實(shí)現(xiàn)方式1：利用vue的ref
html代碼如下：
搜索
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）
搜索
Js代碼如下：
searchIn(){
this.searchBtnFlag = !this.searchBtnFlag;
this.$nextTick(function () {
document.getElementById("inputVal").focus();
})
},
說(shuō)明：必須在$nextTick內(nèi)使用方法是因?yàn)椋篸om更新的先后順序的問(wèn)題，不是所有的數(shù)據(jù)改變一定會(huì)觸發(fā)dom的更新，而在修改數(shù)據(jù)之后立即使用這個(gè)方法，可以獲取更新后的 dom。
誤區(qū)：直接使用autofocus
html：
搜索
js：
searchIn(){
this.searchBtnFlag = !this.searchBtnFlag;
this.$nextTick(function () {
document.getElementById("inputVal").focus();
})
},
這樣的寫(xiě)法只在第一次時(shí)起作用，如果點(diǎn)擊取消后再次點(diǎn)擊搜索按鈕則不會(huì)再次使input框自動(dòng)聚焦。
記錄一下，以備以后忘了好找。
以上這篇vue 表單輸入框不支持focus及blur事件的解決方案就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
來(lái)源：腳本之家
鏈接：https://www.jb51.net/article/199928.htm
申請(qǐng)創(chuàng)業(yè)報(bào)道，分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處，共同探討創(chuàng)業(yè)新機(jī)遇！
