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

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

ScrollView 布局问题 键盘弹起 页面滚动 CSS修复
关键词由CSDN通过智能技术生成

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

overflowY:auto；
minheight:100vh
overflowX:hidden

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

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

iimmhy
关注
  • 4
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
小程序 input键盘弹出时，滚动页面，输入框内容错位问题
记录美好生活
06-16 4508
页面中内容超过一屏的时候，滚动到底部或者中间，只要是超过一屏的地方，—input聚焦的时候就会把焦点弹到页面最顶部 我现在是直接写的一个包裹元素，然后给样式 height:100%; overflow:scroll; box-sizing: border-box; padding-bottom:80rpx; 解决办法是：把最外层的包裹元素换成下面代码，然后把样式height:100%;overflow:scroll;去掉！！！ view: <scroll-view scroll-y=
如何让网页的内容不随着网页的放大与缩小使网页布局发生错乱
weixin_52682014的博客
11-01 1万+
方法1：我们可以对全局和每一个div都写出宽和高来约束他 方法2：可以对主体内容设置一个最小宽度然后在里面固定宽高，这个宽度比电脑的宽度都低不少，一般为1000px左右。(不要忘记给每个大板块加 magin: 0 auto)
微信小程序使用input标签遇到的问题
最新发布
qq_41687299的博客
05-17 459
场景2：input标签在scroll-view标签里边，聚焦键盘弹起后，滑动页面，当前聚焦的input标签会跟着滑动。解决方案：同样是曲线救国，聚焦的时候设置上层的元素隐藏，（如果是弹框的话，弹框弹起的时候设置input隐藏）在网上搜的用官方给的always-embed属性，但是也明确标注了只有ios可用。解决方案：曲线救国，聚焦或点击的时候禁止页面滚动，失焦的时候放开。场景1：多个input标签切换无法聚焦问题。场景3：input标签聚焦会覆盖其它的元素。
解决CSDN文档打印排版混乱问题
qq_37247026的博客
03-15 648
【代码】解决CSDN文档打印排版混乱问题。
解决微信小程序自定义头部后，软键盘弹起时页面整体上移
韩瑜的博客
01-27 1万+
1
解决HTML缩小窗口页面内容排版全部打乱问题
热门推荐
qq_52622178的博客
08-10 2万+
【方法一】 下图缩小窗口排版全乱 给body 加上这两行代码，让上下外边距为0，左右两个外边距自动相等，和方法二结果相同，给隐藏的部分加上导航条。 width: 1200px; margin: 0 auto; 加上这两句结果如下图所示： 【方法二】 如下图所示，缩小窗口，页面布局全部打乱 在body的css中加上这两句话，当窗口最小宽度min-width <1200px 时，会生成导航条将内容隐藏，但是页面的排版布局不会乱 width: 100%; min-width: 1200px;
edge关于style=“display:block“ 引发的页面布局错乱的解决办法
LuYanLin_的博客
03-01 630
style="display:"
微信小程序 input输入框控件详解及实例（多种示例）
08-31
在微信小程序中，`input`输入框控件是用户交互的重要组成部分，用于接收用户输入的文字、数字或其他文本信息。在登录、注册、搜索等功能中，输入框是必不可少的元素。本文将详细介绍微信小程序的`input`输入框控件，...
微信小程序picker组件下拉框选择input输入框的实例
01-03
微信小程序picker组件下拉框选择input输入框的实例 实现效果图： 页面 预约项目 <text>{{casArray[casIndex]}} </view
微信小程序 input输入框详解及简单实例
11-28
微信小程序输入框input 相关文章： 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 ...
微信小程序源码 瀑布流布局(学习版)
06-18
微信小程序源码 瀑布流布局(学习版)微信小程序源码 瀑布流布局(学习版)微信小程序源码 瀑布流布局(学习版)微信小程序源码 瀑布流布局(学习版)微信小程序源码 瀑布流布局(学习版)微信小程序源码 瀑布流布局(学习版)...
微信小程序 - 弹出键盘遮挡住输入框解决方案
03-29
在开发微信小程序的时候遇到，输入用户名或者手机号以及地址，手机键盘调起来，会把输入框遮挡。 如图： (此图片来源于网络，如有侵权，请联系删除! ) (此图片来源于网络，如有侵权，请联系删除! ) 以上两张图是自己...
【AntV G6】页面节点错乱
hggl_bera的博客
03-02 908
布局的计算时间和动画产生了冲突，动画开始的时候实际上大数据量的布局还没有计算完成。在展开大量节点的时候，需要把动画关掉。懒加载子节点过多时，页面节点出现错乱，如下图。
uniapp 微信小程序input 内容错位问题
qq_35388369的博客
05-31 999
微信小程序input文本错位
解决uni-app微信小程序底部input输入框，键盘弹起时页面整体上移问题
Xu0401的博客
11-16 7298
解决uni-app微信小程序底部input输入框，键盘弹起时页面整体上移问题 解决思路：1.设置使键盘弹起使页面不上移；2.设置输入框所在盒子为绝对定位；3.键盘弹起时获取键盘高度；4.设置输入框所在盒子的bottom的键盘高度；5.清除输入框固定定位导致的浮动（在输入框盒子的上面盒子下方设置padding-bottom【高度与输入框相同】；或者在输入框所在盒子上面加一个块级元素【高度与输入框相同】）
【小程序开发技巧】input框保持focus状态
Athain的博客
04-01 9734
最近在做一个小程序，用到了即时通讯框架，于是着手撸一个界面 （请别介意这爆丑的界面=3=） 开发者工具上，调试，即时通讯系统能够正常使用了，嗯，上真机~ 这时候就出现问题了。 因为点击input框时，会聚焦拉起键盘，但是点击发送时，input丢失了焦点，键盘就缩回去了，难不成要用户发一句点一下键盘？？ 查看官方api文档，对于input组件，有一个可能用的上的属性focus 属性名 类型...
解决微信小程序的input组件位置错乱的问题
hongkid的专栏
10-20 2512
微信小程序的input，如果包在view组件下面，动态渲染，发送位置改变的情况下可能出现定位错乱的问题。 解决的方案是把input组件放在scroll-view下面，只有srcoll-view才会触发input组件的重新渲染。input是本地组件 ...
微信小程序input点击输入时placeholder位移
The_zero_close的博客
03-29 1921
input使用了box-sizing: border-box;样式的同时添加了上下内边距（padding）或上下外（margin），猜测是border-box下的placeholder获得焦点之后使上下边距失效了。微信小程序原生组件input文本输入框， 点击使输入框获得焦点后，placeholder占位符文字位置会向上编移，可以把box-sizing:border-box去掉。
编码实现清空微信小程序输入框内容
05-11
可以通过以下代码实现清空微信小程序输入框内容： ```js // 获取输入框组件 const inputComponent = this.selectComponent('#input'); // 清空输入框内容 inputComponent.setData({ value: '' }); ``` 需要注意...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值