采用指令的方式來解決這個(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' type='text' v-model='searchVal' placeholder='搜索標(biāo)題或內(nèi)容...' /><div v-show='searchBtnFlag' @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 type='text' v-model='searchVal' placeholder='搜索標(biāo)題或內(nèi)容...' /><div v-show='searchBtnFlag' @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' type='text' v-model='searchVal' placeholder='搜索標(biāo)題或內(nèi)容...' /><div v-show='searchBtnFlag' @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è)參考，也希望大家多多支持好吧啦網(wǎng)。