微信小程序输入发键盘弹出控制以及ios兼容问题

最新推荐文章于 2024-06-03 16:25:46 发布
最新推荐文章于 2024-06-03 16:25:46 发布
阅读量2.3k 收藏 1
点赞数
分类专栏： 前端 文章标签： javascript 前端 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sjpeter/article/details/111695184
版权

请先查看微信小程序组件input,相关文件，发现使用bindfocus可以获取键盘的高度，bindblur可以控制页面还原

使用bindfocus 输入框失去焦点时触发，event.detail.height 通过布局来，处理不想撑高的布局。

 

  • ios 兼容在使用布局时，使用bottom固定位置，发现ios，在bottom设置为0，改变为非零是，input组件会失去焦点，导致键盘收回

 

 

亡魂
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序中遇到的iOS兼容性问题小结
10-17
主要给大家介绍了关于微信小程序中遇到的一些iOS兼容性问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
微信小程序 - 弹出键盘遮挡住输入框解决方案
03-29
在开发微信小程序的时候遇到，输入用户名或者手机号以及地址，手机键盘调起来，会把输入框遮挡。 如图： (此图片来源于网络，如有侵权，请联系删除! ) (此图片来源于网络，如有侵权，请联系删除! ) 以上两张图是自己...
ios 最新系统bug与解决——微信公众号中弹出键盘再收起时，原虚拟键盘位点击事件无效...
weixin_34327761的博客
12-06 1165
最近ios发布新版本系统12.1，随着部分用户的系统更新，一些问题也渐渐暴露出来。。。 公司用户反映微信公众号出现了点击无效的bug！！测试调查发现，只有iphonex、iphone6，ihpone7等部分机型会出现该问题 我当时就是一惊，一般出现在事件上的问题都是疑难杂症。何况是跟键盘相关的。 我们都知道在H5端是没法监控键盘的弹出与收起的，resize事件触发的机型极其有限，何况我在ios中实...
在uniapp小程序（ios）中，进入页面后会自己弹出键盘[uni-popup组件]
最新发布
qq_39335122的博客
06-03 404
uni自带的这种方式在ios的小程序中，在打开页面时会跳出键盘输入框，这时候需要自己新建一个输入框来绑定所需要输入的值。
iOS设备input不能自动focus聚焦的解决方法
五颜六色的白
05-06 657
我出现在这个问题的原因是：刚开始需要隐藏input框，上面有一段文字需要逐个显示出来，这导致文字显示的时候空间不断撑高，input框位置向下移动，所以ios就出现聚焦失败，拉不起键盘的问题。参考资料：https://cloud.tencent.cn/developer/article/1545937。我是在小程序里面遇到的，安卓系统好好地，就ios毛病最多，shit。,聚焦失败，拉不起键盘。解决方案：将input框所在的位置固定，不要让乱移动。解决方案：总结一句话----需要。
H5 IOS端 Input 弹出软件键盘后不流畅、卡顿、无法再次弹出软键盘
还想做MAD
12-09 1172
解决办法： 在input聚焦和失焦的时候 window.scroll(0, 0)
微信小程序避坑、兼容性问题
weixin_57033986的博客
03-11 1322
小程序 input框穿透、code，获取手机号、official-account
微信小程序之input组件：真机键盘弹窗遮盖输入框一部分或遮住输入框样式
热门推荐
Hello，陌生人^o^。遇见你真好...
09-01 1万+
遇到了一个比较常见，但不注意就会犯错的问题：小程序里面经常会用到组件input，属性也很丰富，如果在页面排版中，将输入固定在底部作为评论之类的，可能就会遇到一个问题，在真机上测试（移动端），点击input组件默认会将键盘弹起时，自动上推页面，就会发现，因为弹窗很容易遮住input组件相关的内容及样式。 （一）问题详情 1、默认没有点击input输入框（评论框）的时候： 2、点击input...
酒浓码浓 - ios进入页面自动弹出键盘
酒浓码浓
11-01 2040
ios移动端进入页面怎么自动弹出键盘 最近做的H5页面业务上有个需求，要在移动端，进入到某个页面自动聚焦input的焦点并弹出软键盘！！！ 查了一圈，发现autofocus，在android上只能聚焦不弹键盘，ios上不聚焦也不弹键盘。 也用了N种方式，什么settimeout，什么模仿button触发click触发input的focus，什么自行封装touch事件等等等等！！ 全尼玛不好...
小程序长按识别取消IOS系统弹出保存
hql1024的博客
09-03 249
body, html { background: #f5f5f5; touch-callout: none; -webkit-touch-callout: none; -ms-touch-callout: none; -moz-touch-callout: none; }
微信小程序中的ios兼容性问题
03-29
3.微信小程序中解决ios中new Date() 时间格式不兼容 在实现倒计时，根据后台返回的时间格式转换时，后台返回了时间格式为”2018-11-12 11:12:11”，然后利用new Date() 转换时，ios中无法展示，安卓中显示正常 let ...
微信小程序使用modal组件弹出对话框功能示例
01-19
本文实例讲述了微信小程序使用modal组件弹出对话框功能。分享给大家供大家参考，具体如下： 1、效果展示 2、关键代码 ①、index.wxml 提示：{{tip}} <button type=default bindtap=showModal>点击我弹出...
微信小程序车牌键盘
03-29
公司要做一个停车场微信小程序，支持临时车预支付以及支付记录查询等功能,其中涉及车牌输入的功能，为了提升用户体验，避免繁琐的输入，决定自己写一个键盘。 效果图如下 省份简写键盘如下: (此图片来源于网络，如有...
微信小程序唤起键盘页面溢出的解决方案
weixin_45722941的博客
05-06 541
会引起除了 input 元素的其他元素一并上移。这样做可以保证页面内原有元素的高度比例不被压缩。微信小程序的 input 组件，如果使用自带的。，确定好每个元素所占的大小。就是我整个页面的高度，再直接根据。的百分比设置好每个容器的大小。首先获取到屏幕的高度。
iOS微信小程序键盘弹出时输入框被挡住
Lyran的博客
02-13 2910
底部输入框采用fixed定位后，在iPhone13这种有底部安全区的手机上，键盘弹出时被遮挡，在安卓机上是正常的。
iOS第三方键盘高度获取不准确问题
weixin_34367257的博客
09-08 608
直接上代码,搜狗的输入法 - (void)keyboardWasShown:(NSNotification*)aNotification { //一旦键盘遮挡了输入框,那么就抬起来 NSDictionary* info = [aNotification userInfo]; CGSize kbSize = [[info objectForKey:UIKeyboar...
调用focus方法使输入框获得焦点，不弹出软键盘的解决方法
lin_1234的专栏
04-16 5517
[Phonegap+Sencha Touch] 移动开发10 调用focus方法使输入框获得焦点，不弹出软键盘的解决方法 在phonegap打包的web应用用，调用输入框的.focus()方法的时候，输入框是获得焦点了，但是不会弹出软键盘。 1、对于安卓，使用phonegap插件： https://github.com/phonostar/PhoneGap-SoftKey
微信小程序开发，软键盘唤起导致页面上推穿透导航（关于ios和android全面屏方面兼容需要调整的地方比较多）
u013776700的博客
08-02 2743
uniapp 小程序页面上推 定位问题
微信小程序ios设备上input无法输入
WangYi0118的博客
07-20 2220
<view class="coupon-input"> <input class="main-input" placeholder-class="phtext" name="viodLink" value="{{viodLink}}" placeholder="请输入" bindinput="viodLinkInput" /> </view> .coupon-input { -webkit-user-select: text !important; } .ma
微信小程序阻止输入法键盘弹出
05-18
可以通过在小程序中设置 `focus` 属性为 false 来阻止输入法键盘弹出。 具体地，在需要阻止键盘弹出的输入框/文本框上添加 `bindfocus` 和 `bindblur` 事件，然后在相应的事件处理函数中设置输入框/文本框的 `focus` 属性即可。 示例代码如下： ```html <view> <input placeholder="请输入内容" bindfocus="onFocus" bindblur="onBlur" /> </view> ``` ```javascript Page({ onFocus() { // 阻止键盘弹出 this.setData({ 'inputFocus': false }) }, onBlur() { // 恢复键盘弹出 this.setData({ 'inputFocus': true }) } }) ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值