快捷導(dǎo)航

uniapp小程序點(diǎn)擊輸入框時(shí)阻止彈出軟鍵盤的幾種解決方案

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

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

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

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

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

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

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

附：uniapp 自動(dòng)獲取焦點(diǎn)，不彈出軟鍵盤

最近做項(xiàng)目遇見這樣一個(gè)問(wèn)題，app進(jìn)入某一個(gè)頁(yè)面后自動(dòng)彈出軟鍵盤，查找原因后發(fā)現(xiàn)是因?yàn)閕nput使用了auto-focus自動(dòng)獲取焦點(diǎn)所致。解決辦法如下：

第一種：

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

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

第二種方法：

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

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

這一種方法相對(duì)要比第一種好很多。