vue中的input框點(diǎn)擊后不聚焦問(wèn)題
input框點(diǎn)擊后不聚焦問(wèn)題
廢話不多說(shuō)直接上代碼
哪個(gè)地方要寫(xiě)input框 就直接把這一部分代碼放上 里面雙向綁定的值和事件換上自己定義的
?<div class="item" @click.stop.prevent="inputPaentClick('input1')"> ? ? ? ? <input ? ? ? ? ? ref="input1" ? ? ? ? ? placeholder="請(qǐng)輸入搜索關(guān)鍵詞" ? ? ? ? ? v-model="value" ? ? ? ? ? @keydown.enter="searchs" ? ? ? ? /> ? ? ? </div>
在方法里寫(xiě)上這些
? inputPaentClick(refName) {undefined ? ? ? //解決input框雙擊才可以聚焦問(wèn)題 ? ? ? this.$nextTick(() => {undefined ? ? ? ? this.$refs[refName] && this.$refs[refName].focus(); ? ? ? }); ? ? }
只復(fù)制這些就行 input里綁定的事件以及要實(shí)現(xiàn)的方法 寫(xiě)在這個(gè)事件同級(jí)的地方
vue input聚焦的坑
點(diǎn)擊按鈕,使某個(gè)input框聚焦
1、給 input 加個(gè) ref 屬性,寫(xiě)個(gè) button 按鈕并加個(gè)點(diǎn)擊事件
<input type="text" ref="input"> <button @click="onFocus"></button>
2、onFocus方法:
onFocus() { ? ? this.$refs.input.focus() ? }
加載頁(yè)面時(shí)自動(dòng)聚焦
mounted() { ? ? this.$nextTick(() => { ? ? ? this.$refs.input.focus() ? ? }) ? },
【坑】
如果input框是隱藏的,點(diǎn)擊某個(gè)元素讓input框顯示,同時(shí)聚焦,這個(gè)時(shí)候聚焦效果就不會(huì)實(shí)現(xiàn)。
解決辦法:
點(diǎn)擊元素的時(shí)候用個(gè)變量做標(biāo)識(shí),然后再watch里面去監(jiān)聽(tīng)這個(gè)變量,通過(guò)判斷這個(gè)變量的值來(lái)聚焦,
可以寫(xiě)在setTimeout里面,或者寫(xiě)在nextTick里面即可解決問(wèn)題;代碼如下
watch: { ? ? isClick(){ ? ? ? if(this.isClick == false) { ? ? ? ? setTimeout(() => { ? ? ? ? ? this.$refs.input.focus() ? ? ? ? }, 100); ?? ??? ?// this.$nextTick(() => { ? ? ? ? // ? this.$refs.input.focus() ? ? ? ? // }); ? ? ? } ? ? } ? }
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue.js 解決v-model讓select默認(rèn)選中不生效的問(wèn)題
這篇文章主要介紹了vue.js 解決v-model讓select默認(rèn)選中不生效的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07如何在Vue項(xiàng)目中使用axios請(qǐng)求
這篇文章主要介紹了如何在Vue項(xiàng)目中使用axios請(qǐng)求,對(duì)Vue感興趣的同學(xué),可以參考下2021-05-05vue項(xiàng)目webpack中Npm傳遞參數(shù)配置不同域名接口
這篇文章主要介紹了vue項(xiàng)目webpack中Npm傳遞參數(shù)配置不同域名接口,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06vsCode中vue文件無(wú)法提示html標(biāo)簽的操作方法
在vsCode中書(shū)寫(xiě)Vue頁(yè)面時(shí)無(wú)法提示,那真是很郁悶的事情,下面這篇文章主要給大家介紹了關(guān)于vsCode中vue文件無(wú)法提示html標(biāo)簽的操作方法,需要的朋友可以參考下2023-03-03VUE+node(express)實(shí)現(xiàn)前后端分離
在本篇文章里小編給大家分享的是關(guān)于VUE+node(express)前后端分離實(shí)例內(nèi)容,有需要的朋友們參考下。2019-10-10詳解vue父子組件關(guān)于模態(tài)框狀態(tài)的綁定方案
這篇文章主要介紹了詳解vue父子組件關(guān)于模態(tài)框狀態(tài)的綁定方案,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-06-06vue指令?v-bind的使用和注意需要注意的點(diǎn)
這篇文章主要給大家分享了?v-bind的使用和注意需要注意的點(diǎn),下面文章圍繞?v-bind指令的相關(guān)資料展開(kāi)內(nèi)容且附上詳細(xì)代碼?需要的小伙伴可以參考一下,希望對(duì)大家有所幫助2021-11-11