快捷導(dǎo)航

uniapp如何手動(dòng)實(shí)現(xiàn)讓input文本框聚焦效果

更新時(shí)間：2023年12月05日 11:44:02 作者：TA遠(yuǎn)方

最近使用uniapp做一個(gè)評(píng)論的功能,遇到一個(gè)需求就是點(diǎn)擊上面的評(píng)論圖標(biāo),讓定位在底部的input框聚焦,下面這篇文章主要給大家介紹了關(guān)于uniapp如何手動(dòng)實(shí)現(xiàn)讓input文本框聚焦效果的相關(guān)資料,需要的朋友可以參考下

開(kāi)發(fā)中遇到一個(gè)問(wèn)題，希望在每次操作頁(yè)面完成后，input文本框都能自動(dòng)聚焦，那么問(wèn)題來(lái)了，應(yīng)該怎么做，接下來(lái)請(qǐng)繼續(xù)往下看。

也許大多數(shù)同學(xué)都會(huì)這么做，嘗試過(guò)修改文本框?qū)傩?code>focus為 true，但是沒(méi)有效果，參考如下

<template>
	<view class="content">
		<!-- 此處省略... -->
		<view class="expand">
			<input class="input" type="text" v-model="value" focus="true"/>
		</view>
		<!-- 此處省略... -->
	</view>
</template>

嘗試手動(dòng)實(shí)現(xiàn)，調(diào)用focus事件，想到它可不像之前的h5項(xiàng)目，是沒(méi)有操作dom的方法，所以暫時(shí)擱置，在網(wǎng)上找了解決方案都不合適

看來(lái)只有自己解決了，先理清一下思路，知道聚焦?fàn)顟B(tài)吧，如果直接設(shè)置屬性focus一直為true好像不太對(duì)，嘗試去設(shè)置狀態(tài)更新，參考如下

<template>
	<view class="content">
		<!-- 此處省略... -->
		<view class="expand">
			<input class="input" type="text" v-model="value" :focus="isInputFocus" @blur="onblur"/>
		</view>
		<!-- 此處省略... -->
	</view>
</template>

發(fā)現(xiàn)了么，在input輸入框組件上，設(shè)置屬性focus變量isInputFocus可更新，然后添加一個(gè)屬性方法onblur()

應(yīng)該這樣做，當(dāng)輸入框失去焦點(diǎn)后，需要調(diào)用一下方法，去更新一下?tīng)顟B(tài)，參考如下代碼

export default {
		data() {
			return {
				//...
				value:'',
				isInputFocus:true,
			};
		},
		methods:{
			onblur(){
				this.isInputFocus=false;
			},
			//...
		}
	}

當(dāng)操作完成后，手動(dòng)設(shè)置輸入框聚焦，執(zhí)行代碼如下，難道不會(huì)想到可以這樣用么！

this.$nextTick(()=>{
	this.value='';
	this.isInputFocus=true;
})

附：uniapp input自動(dòng)聚焦

input標(biāo)簽有一個(gè)屬性focus：獲取焦點(diǎn)。默認(rèn)值false

<input :focus="firstFocus" type="text" value="" placeholder="請(qǐng)輸入藥品名稱(chēng)" />

初始化firstFocus為false

export default {
    data() {
        return {
            firstFocus:false,
        }
    },
}

在onload中修改焦點(diǎn)值

onLoad(options) {
    var that = this;
    that.firstFocus = false;
    setTimeout(function(){
        that.firstFocus = true;
    },500)
}

總結(jié)

到此這篇關(guān)于uniapp如何手動(dòng)實(shí)現(xiàn)讓input文本框聚焦效果的文章就介紹到這了,更多相關(guān)uniapp讓input文本框聚焦內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: