100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 小程序input调用虚拟键盘阻止系统键盘与虚拟键盘点击穿透问题

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

时间:2023-04-11 12:50:18

相关推荐

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。