uniapp如何手動實(shí)現(xiàn)讓input文本框聚焦效果
開發(fā)中遇到一個(gè)問題，希望在每次操作頁面完成后，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>
嘗試手動實(shí)現(xiàn)，調(diào)用focus事件，想到它可不像之前的h5項(xiàng)目，是沒有操作dom的方法，所以暫時(shí)擱置，在網(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可更新，然后添加一個(gè)屬性方法onblur()
應(yīng)該這樣做，當(dāng)輸入框失去焦點(diǎn)后，需要調(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)簽有一個(gè)屬性focus：獲取焦點(diǎn)。默認(rèn)值false
<input :focus="firstFocus" type="text" value="" placeholder="請輸入藥品名稱" />
初始化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如何手動實(shí)現(xiàn)讓input文本框聚焦效果的文章就介紹到這了,更多相關(guān)uniapp讓input文本框聚焦內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
javascript parseInt() 函數(shù)的進(jìn)制轉(zhuǎn)換注意細(xì)節(jié)
parseInt(string, radix) 有2個(gè)參數(shù)，第一個(gè)string 是傳入的數(shù)值，第二個(gè)radix是 傳入數(shù)值的進(jìn)制，參數(shù)radix 可以忽略，默認(rèn)為 10，各種進(jìn)制的數(shù)轉(zhuǎn)換為 十進(jìn)制整數(shù),接下來詳細(xì)介紹，感興趣的朋友可以了解下哦2013-01-01
Vue elementUI實(shí)現(xiàn)免密登陸與號碼綁定功能
這篇文章主要介紹了Vue elementUI實(shí)現(xiàn)免密登陸與號碼綁定功能，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-11-11
這篇文章主要介紹了淺談如何優(yōu)雅處理JavaScript異步錯誤，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)拖拽元素選擇和刪除，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
js模擬濾鏡的圖片漸顯效果...2007-02-02
JavaScript中變量提升和函數(shù)提升實(shí)例詳解
這篇文章主要給大家介紹了關(guān)于JavaScript中變量提升和函數(shù)提升的相關(guān)資料,以及JS變量提升和函數(shù)提升的順序,文中給出了詳細(xì)的介紹,需要的朋友可以參考下2021-07-07
JavaScript九九乘法口訣表的簡單實(shí)現(xiàn)
這篇文章主要介紹了JavaScript乘法口訣表的簡單實(shí)現(xiàn)，文中給出了詳細(xì)的示例代碼，這樣對大家的理解和學(xué)習(xí)更有幫助，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-10-10
javascript 函數(shù)限制調(diào)用代碼
javascript 函數(shù)限制調(diào)用代碼，需要的朋友可以參考下。2010-05-05
文章從什么是閉包、以及閉包所涉及的作用域鏈說起，講述了JavaScript垃圾回收機(jī)制、循環(huán)引用、循環(huán)引用和閉包、IE中的內(nèi)存泄漏以及解決方法，是篇非常詳盡，非常不錯的文章，這里推薦給大家。2014-11-11
js實(shí)現(xiàn)的常用的左側(cè)導(dǎo)航效果
使用js簡單實(shí)現(xiàn)下常用的左側(cè)導(dǎo)航效果為提高導(dǎo)航性能而生，各位朋友可以參考應(yīng)用，希望對大家有所幫助2013-10-10