关于手机键盘遮挡picker问题

最新推荐文章于 2022-09-07 14:28:22 发布
最新推荐文章于 2022-09-07 14:28:22 发布
阅读量765 收藏
点赞数
分类专栏： 小程序开发 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bigboy1010/article/details/106421585
版权

如图所示，当输入完手机号时，点击下面的picker的input输入框，就会出现键盘遮挡picker的问题，input的disable已经设置为true

，有没有好多解决遮挡的方法，

没办法就只能先写地址，后写电话了

解决方法：

现在三种解决方法。
1.给picker绑定点击事件并且input一定要是disable。点击后调用wx.hideKeyboard()隐藏掉键盘。
2.使用view模拟input的placeholder
3.给input绑定focus变量，点击后设置focus的变量为false

bigboy1010
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
mui picker无法滑动和选项遮挡问题修复
07-05
对应的picker问题修复后的文件
微信小程序iOS下使用picker选择器与软键盘重叠遮挡问题的解决方案
qq_41594043的博客
11-19 2368
今天可真是高产呀，哈哈，项目告一段落就有时间review下代码啦，顺便把坑记录一下 项目场景： 一个表单提交页，input、picker都有用到 问题描述： 如图所示，iOS下如果先点击了input弹出软键盘，再点击picker弹出选择框，但是软键盘却没有收起。 <Picker className='complaintViewTextPicker' value={selectorChecked} mode='multiSelector' range={mulSelector} onChange
frameWork7 picker 选择器 点击安卓物理返回键遮罩层问题
qzo_smile的博客
08-25 333
f7 picker 选择器 安卓物理返回键 bug； 现象： 当你点了选择器， 弹出弹窗选择，点击安卓的物理返回键，页面返回上一层 但是有一遮罩层在详情页导致无法点击页面其他内容，无法操作。 解决方案： 监听物理返回键 cordova backButton mounted() { document.addEventListener('backButton', this.onBackKeyDown); } methods: { onBackKeyDown() { // 你选择器弹起的组件
van-picker下拉列表浮动在顶层，遮挡其他界面
qq_37471721的博客
07-30 1241
由于近期项目采用了Vant作为移动端UI组件库,在使用vant-picker时遇到问题，整理记录下来，方便自己及他人。 代码如下： 期望的效果 实际效果 可以看出每次点击选择“维护计划”的时候，总是会弹出一个列表层，遮挡住我要选择的界面，令人费解。 解决办法： 需要给van-field增加readonly属性。 最终代码： ending… ...
uniapp 微信小程序 uview u-picker和u-action-sheet的层级问题/解决覆盖问题
树上骑个猴的博客
05-13 3962
我的场景： 点击按钮拉起u-action-sheet，此时再点击按钮拉起u-picker，结果发现u-picker在u-action-sheet的下面，被遮盖了。 解决方案： 给他们包裹一层容器，给他们的容器设置布局和层级。 <template style="position: absolute;z-index: 100;" v-if="isShowPageRangeComponent"> <u-picker ref="uPicker" class="picker-height" :im
当触摸到某些控件时候 隐藏输入法键盘
zhouxin1233的博客
07-25 394
当触摸到某些控件时候 隐藏输入法键盘linearLayout.setOnTouchListener(this); @Override public boolean onTouch(View view, MotionEvent motionEvent) { if (view == linearLayout && motionEvent.getAction()== MotionE
daterangepicker中文示例
12-09
daterangepicker是一个好用的时间范围选择插件，基于jquery，本内容是daterangepicker的中文示例
w-picker picker
01-29
uniapp app端地址选择器，时间选择器。
weui中的picker使用js进行动态绑定数据问题
10-16
主要介绍了weui中的picker使用js进行动态绑定数据问题，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
mui.picker.min.js
06-26
该文件是修复了mui.picker选择器插件的坑之后的代码。具体内容看博客：https://blog.csdn.net/wltsysterm/article/details/93738180
移动端vant的日历组件弹框会带出手机自带的键盘
m0_61163745的博客
09-07 1262
依赖vant-ui框架做个日期弹框，用到DatetimePicker插件，DatetimePicker插件没有自带弹框效果，所以也得嵌套在van-popup组件里进行弹出。
forEach()为数组中的每一项添加一个属性
bigboy1010的博客
05-30 6020
//添加一个isSlect属性，用于判断是否勾选商品 res.result.data.forEach(v=>{ v.isSelect=false; })
小程序计算器一个
bigboy1010的博客
07-04 5783
wxml： <view class="calculator-container"> <!-- 标题 --> <view class="cal-title"> <view class="cal-title-h1">CALCULATOR</view> <view class="cal-title-h2">-小桐桐计算器-</view> </view> <!-- 计算器显示框
for(var key in data）循环遍历函数
bigboy1010的博客
05-27 5726
for in 循环中key在对象和数组代表的值不一样，对象中即为对象名，数组中即为下标index； 举例如下： 1.获取对象中的键（key）与值（value）： var data = {name:'小花',age:'17岁',sex:'男'}; for (var a in data) { console.log(a); /*属性名*/ console.log(data[a]); /*属性值*/ }; 2.获取数组中的值var a =...
arr.indexOf(i)，检查数组是否存在相应字符串，不存在返回-1，存在返回对应位置下标
bigboy1010的博客
05-30 2669
应用实例 //存储商品id varids=[]; res.result.data.forEach(v=>{ //如果当前商品不存在，即不重复，则将当前商品id推进ids数组中 if(ids.indexOf(v.id)===-1){ ids.push(v.id); } }) ...
swiper不能显示的问题
bigboy1010的博客
04-28 2480
第一次记录踩的坑，防不胜防 swiper中轮番播放三个色块，父容器的class为"container"时不能显示出来，现象为白屏，当把container改为其它即可，container应该为swiper的保留字符， //container改为其他，如：mycontainer <viewclass="container"> <swiper> ...
布局（一）——流体浮动布局
bigboy1010的博客
04-13 1399
记录一下自学过程中对布局的自我理解 一，流体布局 流体布局通俗的讲就像水上偏流的“盒子”一样，哪有缝隙往哪里流动，前提是缝隙放的下“盒子”的宽度，这里的“盒子”宽度用百分比表示，即：width：40%，（相对整个body的宽度），这也算是流体布局的一大优点，可以铺满屏幕 属性用到： float ：(为“盒子”添加浮动特性) 值 描述 left 元素向左浮动。 r...
小程序添加自定义字体
bigboy1010的博客
07-03 1252
下载需要的字体XX.ttf格式，转换成 base64 编码的就可以了，然后就能使用了 转换的网址：https://transfonter.org 下载之后，把文件里面的xx.css文件复制到小程序的 . wxss文件里就可以 这样的 ???? 然后就可以在小程序中用font-family 调用了，这里要注意，调用的时候小程序字体库不会显示自定义字体的名字，只要写对自定义的名字就可以（坑） ...
检测输入手机格式是否正确的方法
bigboy1010的博客
05-27 1191
modifyPhone:function(e){ //正则表达式，验证手机号格式 //\d:表示[0-9] //^：开头 //$:结尾 varphoneReg=/^1[3456789]\d{9}$/ //如果验证失败，返回false if(!phoneReg.test(e.detail.value)){ wx.showToast({ title:'手机号格式不正确', ...
el-date-picker 层级遮挡
最新发布
06-08
如果您使用的是 Element UI 的 `el-date-picker` 组件，并且出现了层级遮挡的问题，可以考虑对其进行样式调整。 可以给 `el-date-picker__editor-wrap`、`el-date-picker__time-header`、`el-date-picker__header`...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值