欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2023年12月05日 11:44:02   作者：TA遠(yuǎn)方  
最近使用uniapp做一個評論的功能,遇到一個需求就是點擊上面的評論圖標(biāo),讓定位在底部的input框聚焦,下面這篇文章主要給大家介紹了關(guān)于uniapp如何手動實現(xiàn)讓input文本框聚焦效果的相關(guān)資料,需要的朋友可以參考下

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

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

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

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

看來只有自己解決了，先理清一下思路，知道聚焦?fàn)顟B(tài)吧，如果直接設(shè)置屬性focus一直為true好像不太對，嘗試去設(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可更新，然后添加一個屬性方法onblur()

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

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

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

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

附：uniapp input自動聚焦

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

<input :focus="firstFocus" type="text" value="" placeholder="請輸入藥品名稱" />

初始化firstFocus為false

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

在onload中修改焦點值

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

總結(jié)

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

相關(guān)文章

最新評論