解决小程序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