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输入框阻止弹出软键盘内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
之前提到了JS中比较简单的设计模式，在各种设计模式中被最常使用的工具之一就是原型链的继承。作为OOP的特质之一——继承，今天主要谈谈JS中比较简单的继承方法2016-01-01
js 拖拽翻页2009-04-04
js Firefox 加入收藏夹功能代码 兼容Firefox 和 IE
最近改用Firefox后，发现很多网站的“加入收藏”链接点击无效了，后来发现原来是IE浏览器和Firefox浏览器的“加入收藏夹”的写法是不同的。2009-12-12
这篇文章主要为大家详细介绍了由html、css、javascript结合实现的简单日历，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-07-07
这篇文章主要介绍了JS实现的DOM插入节点操作,结合实例形式分析了javascript针对页面dom元素动态操作相关实现技巧,需要的朋友可以参考下2018-04-04
这篇文章主要介绍了js简单网速测试方法,以完整实例形式分析了JavaScript基于网页图片下载进行测试网速的实现技巧,需要的朋友可以参考下2015-12-12
这篇文章主要介绍了基于Proxy的小程序状态管理实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-06-06
昨天在做js 从10种颜色中随机取色，并每次取出的颜色不同，具体的实现思路如下，感兴趣的朋友可以参考下2013-10-10
跨标签页通信是指在浏览器中的不同标签页之间进行数据传递和通信的过程,这篇文章为大家介绍了一下常见的跨标签页通信方式,感兴趣的小伙伴可以了解下2023-11-11
这篇文章主要为大家详细介绍了js获取地址栏参数的两种方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
最新评论