?<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è)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: