快捷導(dǎo)航

uniapp小程序點擊輸入框時阻止彈出軟鍵盤的幾種解決方案

更新時間：2024年02月04日 09:49:06 作者：RyzenVega

在寫項目時候需要在表單里面加一個picker選擇器,但選擇input的時候軟鍵盤與選擇器會同時彈出,下面這篇文章主要給大家介紹了關(guān)于uniapp小程序點擊輸入框時阻止彈出軟鍵盤的幾種解決方案,需要的朋友可以參考下

解決方式1：@click更換成@tap

但如果同時子元素是開關(guān)等各需要各的功能的話

// 父元素設(shè)置
@tap="clickA"
// 子元素設(shè)置
@tap.stop="clickB"

解決方式2：使用微信官方api阻止鍵盤彈出 hideKeyboard()

解決方式3：最簡單暴力百分百不彈出的方法在此設(shè)置disabled

附：uniapp 自動獲取焦點，不彈出軟鍵盤

最近做項目遇見這樣一個問題，app進入某一個頁面后自動彈出軟鍵盤，查找原因后發(fā)現(xiàn)是因為input使用了auto-focus自動獲取焦點所致。解決辦法如下：

第一種：

onLoad(option) {
    //解決app進入頁面彈出軟鍵盤
    let _self = this
    _self.keyStop()
},
methods: {
    //禁止軟件盤自動彈出
    keyStop(){
    var interval = setInterval(function(){
            uni.hideKeyboard();//隱藏軟鍵盤
            console.log('刷新')
        },20);
        setTimeout(() => {
            clearInterval(interval);
            console.log('停止刷新')
        },3000);
    },
}

這一種方法會有閃現(xiàn)情況發(fā)生，體驗感不是很好。

第二種方法：

<input type="text" class="inp-t" v-model="formData.transcendentalist"  :focus="isFocus" @tap="getFocus" />

data(){
    return{
        isFocus:false 
    }
},
methods{
    getFocus(){
        this.isFocus = true    
    }
}

這一種方法相對要比第一種好很多。