小程序input调用虚拟键盘阻止系统键盘与虚拟键盘点击穿透问题

解决小程序input调用虚拟键盘并阻止调用系统键盘问题与虚拟键盘点击穿透导致下方input获焦问题

点击input弹出虚拟键盘，并不调起系统键盘解决方案
wxml代码

<input type="text" placeholder="请输入车牌号" value='{{carCodeNumber}}' bindtap='getCodeNumber' disabled/>

js代码

getCodeNumber(){this.setData({isKeyboard:true})
},

问题现状：虚拟键盘fiex后覆盖在了input（一组）上面，点击虚拟键盘会穿透，导致下方input获焦

百度解决方案
1.当弹出层里面无滚动的时候：
可以在遮罩的view标签上定义一个防止事件冒泡的方法：

catchtouchmove="preventD"；preventD() {return
}

2.弹出层显示的时候，底部根view元素增加以下class，关闭的时候则移除这个class即可

.noscroll {height: 100%;overflow: hidden;
}

3.直接隐藏ex:if干掉下面的
亲测第一种方法无效，第二种…试都不想试，第三种一看就不符合需求

正确姿势来了
用cover-view替换掉虚拟键盘的view(切记cover-view只能嵌套cover-xxx,否则你会很开心),另需z-index:999;
另赋虚拟键盘部分代码
wxml代码

<cover-view class="keyboard" wx:if="{{isKeyboard}}"><cover-view class="changeKeyboard"><cover-view data-value="省份简称" bindtap="keyboard">省份简称</cover-view><cover-view data-value="英文数字" bindtap="keyboard">英文数字</cover-view><cover-view data-value="完成" bindtap="keyboard">完成</cover-view></cover-view><cover-view class="{{keyboardContent}}" wx:for="{{keyboard}}" wx:key="index" data-value="{{item}}" bindtap="keyboard">{{item}}</cover-view>
</cover-view>

wxss代码

.keyboard{position:fixed;bottom:0;background:rgba(166,166,166,0.6);display:flex;flex-wrap: wrap;justify-content: space-between;flex-direction: row;padding-bottom:20rpx;
}
.changeKeyboard{width:750rpx;display:flex;justify-content: space-between;
}
.changeKeyboard cover-view{width:220rpx;background:white;border-radius: 20rpx;margin:10rpx;line-height:80rpx;text-align:center;
}
.keyboardContent1{background:white;width:80rpx;line-height:80rpx;text-align:center;margin:6rpx;border-radius: 6rpx;
}
.keyboardContent2{background:white;width:72rpx;line-height:72rpx;text-align:center;margin:6rpx;border-radius: 6rpx;
}

PS:谷歌居然解析cover-view

小程序input调用虚拟键盘阻止系统键盘与虚拟键盘点击穿透问题相关推荐

微信小程序input调用数字键盘没有小数点
小程序 input自动聚焦唤起键盘
小程序 input自动聚焦唤起键盘 <input type="text" focus='true' bindconfirm="onConfirm" con ...
微信小程序_调用openAi搭建虚拟伙伴聊天
微信小程序_调用openAi搭建虚拟伙伴聊天背景效果关于账号注册接口实现 8行python搞定小程序实现页面结构数据逻辑结束背景从2022年的年底,网上都是chagpt的传说,个人 ...
微信小程序input为数字键盘
微信小程序input为数字键盘微信小程序的 input 有个属性叫 type,这个 type 有几个可选值: text:不必解释 number:数字键盘(无小数点) idcard:数字键盘(无小数点 ...
微信小程序input搜索解决中文问题(输入拼音) 实时搜索节流处理(bindinput 节流)
微信小程序input搜索解决中文问题(输入拼音) & 实时搜索节流处理(bindinput 节流) 问题微信小程序输入拼音的时候, 还没有完全输入完成, bindinput就会触发, 当我输 ...
java毕业生设计信用卡增值业务系统小程序用户端计算机源码+系统+mysql+调试部署+lw
java毕业生设计信用卡增值业务系统小程序用户端计算机源码+系统+mysql+调试部署+lw java毕业生设计信用卡增值业务系统小程序用户端计算机源码+系统+mysql+调试部署+lw 本源码技术栈 ...
基于JAVA社区微服务平台小程序服务器端计算机毕业设计源码+系统+lw文档+部署
基于JAVA社区微服务平台小程序服务器端计算机毕业设计源码+系统+lw文档+部署基于JAVA社区微服务平台小程序服务器端计算机毕业设计源码+系统+lw文档+部署本源码技术栈: 项目架构:B/S架构 ...
小程序input实现数据双向绑定
小程序input实现数据双向绑定最终效果 index.wxml index.js 最终效果 index.wxml <view class="uploader">< ...
使用Nginx反向代理豆瓣Api电影接口(解决微信小程序频繁调用api被关小黑屋)
首先你要知道什么是Nginx服务器,这个问题百度明白之后继续查看此文章 (要学会自己动手自己独立思考哦) 直接贴代码 ①小程序调用api需要要是https模式才行,https申请请去自己买的云服务器端 ...

小程序input调用虚拟键盘阻止系统键盘与虚拟键盘点击穿透问题

小程序input调用虚拟键盘阻止系统键盘与虚拟键盘点击穿透问题相关推荐

最新文章

热门文章