脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → uniapp输入框阻止弹出软键盘

uniapp小程序点击输入框时阻止弹出软键盘的几种解决方案

 更新时间：2024年02月04日 09:49:06   作者：RyzenVega  
在写项目时候需要在表单里面加一个picker选择器,但选择input的时候软键盘与选择器会同时弹出,下面这篇文章主要给大家介绍了关于uniapp小程序点击输入框时阻止弹出软键盘的几种解决方案,需要的朋友可以参考下

如果不需要监听输入框的话可以直接看解决方式3  本人如此

解决方式1：@click更换成@tap

但如果同时子元素是开关等  各需要各的功能的话 

// 父元素设置
@tap="clickA"
// 子元素设置
@tap.stop="clickB"

解决方式2： 使用微信官方api阻止键盘弹出  hideKeyboard()

解决方式3： 最简单暴力百分百不弹出的方法在此  设置disabled

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

最近做项目遇见这样一个问题，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    
    }
}

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

总结

到此这篇关于uniapp小程序点击输入框时阻止弹出软键盘的文章就介绍到这了,更多相关uniapp输入框阻止弹出软键盘内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论

关注微信公众号

扫一扫