解决微信小程序输入框聚焦时内容被上推致布局错乱

已于 2023-07-10 10:02:13 修改
阅读量1.8k 收藏 5
点赞数 4
分类专栏： 我的React的学习记录 文章标签： ScrollView 布局问题 键盘弹起 页面滚动 CSS修复
于 2022-05-19 09:38:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WliU_LI/article/details/124856539
版权

第一张是正常的未聚焦状态，第二张是滚动后聚焦，文字跑上面去了。解决：页面使用ScrollView组件，设置

overflowY:auto；
minheight:100vh
overflowX:hidden

自己测试了几次，如果页面不超过一页就不用做这些操作，页面如果超过一页就会出现这个BUG，可以试一下这个办法。（亲测是有效的）

图1：
在这里插入图片描述
图2（弹起键盘后）：
在这里插入图片描述

iimmhy
关注
专栏目录
uni-app input输入框聚焦后焦点错乱偏移
jjbao的博客
01-07 3027
uni-app input输入框聚焦后焦点错乱偏移
解决微信小程序输入文本时候页面上移
记录本人工作中遇到的问题、经验总结以及分享。
04-15 1236
把这个值设为同input、textarea一样的高度即可，注意单位。默认开始，可以忽略，注意兼容性即可。
解决微信小程序的input组件位置错乱的问题
hongkid的专栏
10-20 2657
微信小程序的input，如果包在view组件下面，动态渲染，发送位置改变的情况下可能出现定位错乱的问题。 解决的方案是把input组件放在scroll-view下面，只有srcoll-view才会触发input组件的重新渲染。input是本地组件 ...
解决 H5 IOS input 聚焦时，页面整个被推上（下）去了，键盘收起页面未下（上）移 BUG、页面放大
weixin_46600931的博客
03-08 2636
解决 H5 IOS input 聚焦时，页面整个被推上（下）去了，键盘收起页面未下（上）移 BUG、页面放大
uniapp 微信小程序表单input输入框，点击下面的输入框时输入法弹出会把输入框内容顶上去
qq_45067263的博客
10-13 2266
当前页面设置了高度，以及滚动轴，输入法弹出时并没有把页面内容往上定，只顶了输入框内容。
解决微信小程序 输入框获取焦点光标偏移
Julie_Go的专栏
07-27 2887
如题：页面滚动后，点击输入框获取焦点，光标位置发生偏移 解决方法：将页面元素整体放在<scroll-view></scroll-view>标签里 ，给<scroll-view设置固定高度解决了
微信小程序 input输入框详解及简单实例
11-28
微信小程序输入框input 相关文章： 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 ...
微信小程序 实例汇总 完整项目源代码
11-01
微信小程序是一种轻量级的应用开发平台，由腾讯公司推出，主要针对移动设备，尤其是智能手机。它允许开发者在微信内创建原生体验的应用程序，无需通过应用商店即可供用户使用。这个压缩包文件“wechat”很可能包含了...
基于微信小程序的点餐系统设计与实现 毕业论文.docx
04-30
本文档是一篇关于基于微信小程序的点餐系统设计与实现的毕业论文，旨在利用微信小程序这一日益普及的技术，优化餐厅点餐流程，提供便捷的在线点餐服务。论文详细介绍了系统的开发背景、技术选型、需求分析、系统设计...
微信小程序中键盘弹起输入框自动跳到键盘上方处理
最新发布
w15635748705的博客
08-12 4080
键盘未弹起时。
【小程序开发技巧】input框保持focus状态
Athain的博客
04-01 9878
最近在做一个小程序，用到了即时通讯框架，于是着手撸一个界面 （请别介意这爆丑的界面=3=） 开发者工具上，调试，即时通讯系统能够正常使用了，嗯，上真机~ 这时候就出现问题了。 因为点击input框时，会聚焦拉起键盘，但是点击发送时，input丢失了焦点，键盘就缩回去了，难不成要用户发一句点一下键盘？？ 查看官方api文档，对于input组件，有一个可能用的上的属性focus 属性名 类型...
华为手机 微信小程序 input输入框上移
bo_gu的博客
01-09 2418
不知道大家有木有遇到过 微信小程序的input 调起输入法的时候 会被挤上去 输入框跑到上面去了 无论css怎么写怎么布局 还是会跑上移 尤其是测试mm的华为手机 别的手机都OK的。比方说我这里要获取用户昵称 就可以这样。但是只写到这里 还是会有一个上移的动作。解决的方法是 给input加个。看出来了咩 这里需要把。
uniapp 微信小程序input 内容错位问题
qq_35388369的博客
05-31 1175
微信小程序input文本错位
UniApp中input组件在IOS设备上弹出软键盘时页面整体上移问题的解决方案，以及input组件聚焦后弹出软键盘固定在软键盘上方，失去聚焦后回到原始位置。
番茄Salad
06-12 6639
问题：弹出软键盘，整体页面上移！解决：在input组件设置:adjust-position=“false”解决新问题：input组件被软键盘覆盖，没有固定在软键盘上方。解决：根据聚焦事件@focus和失去焦点事件@blur去操作输入框的bottom。ps：需要设置好输入框为固定定位或绝对定位！foot样式：设置了固定定位fixed完成上面操作后，即可伸缩自如！
解决微信小程序长页面滚动到底部点击底部的输入框后输入框漂浮且页面滚动到顶部
仰望星空的代码
07-03 2717
一、问题描述 项目中有一个长页面上部展示部分信息下部为信息录入，页面长度为三屏幕（不同手机屏幕大小略有差异），当滚动到第二屏或者第三屏去填写信息时点击输入框后输入框漂浮起来了并且页面向上滚动了一段距离，回到了第一屏中展示的内容。效果如图。 滚动到第二屏，证件号输入。 点击输入框 可以看到证件号输入框漂浮了起来并且页面滚动到了第一屏展示的内容。 注意：小程序是2018年上线，在2020年4月份之前该页面从未出现过这种现象。推测：微信的后续更新中对微信小程序基础库进行了重构，导致点击输入框后页
微信小程序输入框数据获取（九）
shanliyiyeren的博客
10-23 4848
我们以用户登录例子来写输入框数据的获取。首先，我们做一个登录界面，界面里有用户名输入框，我们要求在第二个界面获得用户名，显示为欢迎XXX登录！ <view class="title"> <text>登录界面</text> </view> <view class="body"> <text>请输入用户名：</text> <input type="text" name="username" ...
小程序 input键盘弹出时，滚动页面，输入框内容错位问题
记录美好生活
06-16 4662
页面中内容超过一屏的时候，滚动到底部或者中间，只要是超过一屏的地方，—input聚焦的时候就会把焦点弹到页面最顶部 我现在是直接写的一个包裹元素，然后给样式 height:100%; overflow:scroll; box-sizing: border-box; padding-bottom:80rpx; 解决办法是：把最外层的包裹元素换成下面代码，然后把样式height:100%;overflow:scroll;去掉！！！ view: <scroll-view scroll-y=
解决 微信小程序 input错位
gongzuoyongde的博客
12-16 4234
解决微信小程序的input组件位置错乱的问题
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值