uniapp 自动获取焦点，不弹出软键盘

最新推荐文章于 2024-06-26 11:19:28 发布

xiequanshuai

最新推荐文章于 2024-06-26 11:19:28 发布

阅读量5.9k

点赞数 3

文章标签： uni-app

本文链接：https://blog.csdn.net/xiequanshuai/article/details/132846703

版权

文章讲述了在开发过程中遇到的app进入页面后自动弹出软键盘问题，介绍了两种解决方案：一是通过定时操作隐藏键盘，但可能带来闪现效果；二是使用`v-model`和`focus`事件管理焦点，提供更流畅的用户体验。

摘要由CSDN通过智能技术生成

最近做项目遇见这样一个问题，app进入某一个页面后自动弹出软键盘，查找原因后发现是因为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);
    },
}

这一种方法会有闪现情况发生，体验感不是很好。

第二种方法：

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

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

这一种方法相对要比第一种好很多。

希望上面两种方法可以解决大家的问题。