解决uni-app 底部输入框，键盘弹起时页面整体上移 问题

最新推荐文章于 2024-09-25 14:28:46 发布
最新推荐文章于 2024-09-25 14:28:46 发布
阅读量1.4w 收藏 25
点赞数 5
分类专栏： uniapp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Boo_crob/article/details/119673881
版权

我在聊天系统和评论区域都遇到过 软键盘把页面顶上去的问题，做聊天系统的时候废了牛鼻子劲才解决页面上移问题，这次做评论功能的时候又遇到了，我觉得以前的方法太麻烦了，想找一个简单的方法，仔细翻读uniapp文档的时候发现了一个属性adjust-position ：Boolean类型，作用是键盘弹起时，是否自动上推页面
来源，uniapp官方文档

  1. 发现将adjust-position属性设置为false。就可以了。前提是vue 页面 softinputMode不能是为 adjustResize
  2. 这个softinputMode属性在page.json文件中，找到需要修改的页面配置，在app-plus中找到softinputMode属性，uniapp中默认属性值是adjustPan，
  3. 后续在点击输入框，弹出的软键盘就不会把页面整体往上移了
  4. 完结-----散会o(￣▽￣)ブ
Boo_crob
关注
专栏目录
uniapp 设置“softinputMode“: “adjustResize“，键盘弹出时，会遮挡住输入框
jiujiuyibai的专栏
09-03 5651
页面的输入框很多，不知道啥子原因，软键盘弹出，经常会挡住输入框，而且切换输入框的时候，有时候页面还会下滑，只有输入的时候，输入框才会跑到键盘上面。调试了很久，以为是页面布局啥的原因，后面直接给根元素一个padding-bottom:600rpx解决了。目前不知道具体原因，或许软键盘弹出的时候不能正确获取页面高度导致。总之感觉是一个BUG。 ...
解决uniapp软键盘弹起导致页面fixed定位元素被顶上去
tt1234561009的博客
05-09 2391
在移动端开发中通常导航栏需要固定在页面的最顶端，但当页面中有输入框且dom元素较多时，点击输入框弹出软键盘会促使导航栏往上移正常情况如图一所示，软键盘弹起如图二所示图一图二。
uniapp里input输入时软键盘弹起将页面顶起，导致头部navbar隐藏问题
最新发布
qq_43619233的博客
09-25 384
描述：在APP中使用u-input或者u-textarea时，获取焦点会唤起键盘，导致顶部的u-navbar或者自定义的顶部标题栏被高度撑起消失。解决：“app-plus”: {
解决uni-app 输入框，键盘弹起时页面整体上移问题
热门推荐
weixin_42125732的博客
10-19 2万+
1.发现将adjust-position属性设置为false。就可以了。前提是vue 页面 softinputMode不能是为 adjustResize 2.这个softinputMode属性在page.json文件中，找到需要修改的页面配置，在app-plus中找到softinputMode属性，uniapp中默认属性值是adjustPan， 在pages.json里该页面注册的style里加上这段代码就能完美解决了 "style": { //手机软键盘升起不让其将页面头部上推 "app-
解决uniapp键盘弹起后顶部的导航栏往上顶的问题
weixin_45600052的博客
12-21 3555
第三步：添加固定定位后，会导致该元素脱标，下面的元素往上顶。在顶部导航栏dom元素的同级 再添加一个dom元素 添加的dom元素的高和顶部导航栏的高保持一致即可。, //手机软键盘升起不让其将页面头部上推 如果所有页面都有键盘弹起的功能，可直接在 appPlus中配置，如果不是，直接在哪个页面需要配置哪个即可（建议），在appPlus中配置 "softinputMode": "adjustResize"后，有的页面没有键盘弹起的功能，会导致该页面不能滚动。uniapp中获取dom元素的方法。
解决uni-app微信小程序底部input输入框，键盘弹起时页面整体上移问题
梅花寺
02-07 6216
由于获取的系统的尺寸单位都是 px ，给 bottom 设置的值单位也一定要是 px!不能因为是手机端就用 rpx，2倍的 rpx 也不可以，因为并不是每个手机分辨率都是我们设计图上375的2倍，一定要用 px 啊！最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
UniApp中input组件在IOS设备上弹出软键盘时页面整体上移问题的解决方案，以及input组件聚焦后弹出软键盘固定在软键盘上方，失去聚焦后回到原始位置。
番茄Salad
06-12 6685
问题：弹出软键盘，整体页面上移！解决：在input组件设置:adjust-position=“false”解决新问题：input组件被软键盘覆盖，没有固定在软键盘上方。解决：根据聚焦事件@focus和失去焦点事件@blur去操作输入框的bottom。ps：需要设置好输入框为固定定位或绝对定位！foot样式：设置了固定定位fixed完成上面操作后，即可伸缩自如！
uni-app H5键盘弹出整体页面上移
weixin_36756837的博客
12-04 5459
将屏幕高度视为视口高度 uni-app开发手机端输入框调出键盘，键盘弹出将页面整个顶上去 原因分析： 移动端h5页面在软键盘弹出 后，body的高度被压缩了，动态绑定body的高度即可解决，就导致原本高度100%的背景图被顶上去一截 解决方案： this.screenHeight = uni.getSystemInfoSync().windowHeight + 'px'; // 把页面高度定成视口高度 ...
关于在uni-app中键盘弹出页面内容被顶走的问题和内容总是保持在底部
justforcode1的博客
08-16 1443
事件来控制input的移动但是使用这个会导致input框显示有延迟，后面找了一下文档中提供了监控键盘高度变化的事件。在此之前找了很多文档看了对键盘的处理很多都是利用了input上的聚焦。
uniapp使用输入框固定在底部键盘弹起把输入框挡住问题
FUFCY的博客
09-29 1929
uniapp使用输入框固定在底部键盘弹起把输入框挡住问题
【无标题】uni-app中当input框获取焦点时键盘弹起时，input框自动上推
heheheyyy的博客
07-28 1028
在微信小程序移动端使用时，在一个uni-popup弹窗中，当input框获取焦点的时候@focus事件出发时，在键盘弹起时，怎么自动上推页面。
解决uni-app输入框被键盘挡住问题
liuyuan_java的专栏
07-05 2269
uni-app输入框被键盘挡住问题：输入框在底部；当弹出键盘时，页面整体上移，页面头信息会消失不见
uni-app制作聊天页面时，点击底部输入框弹出键盘上推页面问题解决方案
weixin_44646986的博客
01-17 6643
一，页面结构设计 先来看看聊天页面结构设计，外层布局如下： <template> <view> <!-- 消息列表 --> <scroll-view class="msg-list" scroll-y="true"> </scroll-view> <!-- 底部输入栏 --> <view class="input-box"> <input :adjust-position="false
uniapp(全端兼容) - 实现点击输入框时完美顶起键盘，获取键盘高度动态计算顶起距离，解决软键盘弹出时输入框被覆盖问题，uniapp微信小程序/移动端h5网页/安卓苹果app（示例代码，一键复制
高级前端工程师
03-07 4012
uniapp，支付宝微信小程序，移动端H5网页网站，软键盘弹出位置不对，软键盘挡住了输入框怎么办，获取键盘高度计算弹出距离，uniapp如何解决输入框input激活后键盘弹出遮挡问题，uniapp输入框偶尔被键盘遮挡，解决uniapp在App环境下输入框被软键盘遮挡的问题，uniapp 完美解决苹果和安卓input框遮挡兼容问题，uniapp输入框拉起软键盘时，输入框显示不全，被软键盘挡住一半，input被键盘遮挡的解决方案，软键盘遮挡输入框，uniapp软键盘顶不起来输入框，输入框没有被软键盘弹出来怎么办
uniapp安卓设备h5页面键盘弹出，页面样式上跳问题——解决笔记
weixin_51973859的博客
04-08 1417
uniapp安卓设备h5页面键盘弹出，页面样式上跳问题——解决笔记 遇到的问题： 使用uniapp写了一个登录页面，当钉钉通过链接进入h5页面后，安卓设备在聚焦输入框时样式就会出现问题，但是奇怪的是苹果设备在钉钉和微信中都没有发现这个问题，安卓在微信中也没有发现这个问题。 解决问题： 这个也没有什么解决的逻辑，就是挺郁闷的哈哈哈，就单单安卓设备在钉钉上直接打开链接看到了这个样式问题，最后找到了这个问题原因，二话不说直接贴码对比一下 会出现这个问题的代码： <template> <vi
解决uni-app微信小程序底部输入框，键盘弹起时页面整体上移 问题
小羊的博客
10-12 9178
解决uni-app微信小程序底部输入框，键盘弹起时页面整体上移 问题 转发自https://www.cnblogs.com/XHappyness/p/13528236.html#4703250 存在问题 做了一个记录页面（类似单方聊天页），输入框在底部；当弹出键盘时，页面整体上移，页面头信息会消失不见 需要实现效果： 比如一个记录页面，需要在键盘弹出时： 底部的输入框跟随键盘上弹 页面头固定在顶部不动 聊天信息区域（即内容区）调整高度，该区域局部滚动 解决方法 底部输入框fixed定位在底部，使用输
uniapp 输入框输入时，会将内容顶上去的解决方案
weixin_45932157的博客
12-08 1009
【代码】uniapp 输入框输入时，会将内容顶上去的解决方案。
uni-app踩坑 - 解决ios系统下微信公众号H5页面软键盘弹出后页面整体上移
PrisonersDilemma的博客
10-24 5998
话不多说，贴代码：
uni-app小程序软键盘弹起会顶起页面
09-12
在uni-app小程序中，当软键盘弹起时，会导致页面整体上移，页面头信息会消失不见。为了实现键盘弹出时底部输入框跟随键盘上弹的效果，可以通过监听输入框的获取焦点事件和失去焦点事件来调整页面布局。 在子组件的input标签中，添加了获取焦点事件inputBindFocus和失去焦点事件inputBindBlur。在inputBindFocus事件中，通过获取手机键盘的高度，将其赋值给输入框所在盒子的bottom属性。这样就可以实现输入框跟随键盘上弹的效果。而在inputBindBlur事件中，将输入框所在盒子的bottom属性设置为0，实现键盘隐藏时输入框回到原来的位置。 需要注意的是，在赋值给bottom属性时，必须加上单位px，这一点非常重要。 除了调整输入框的位置，还可以通过设置页面头部信息为固定位置来避免其被键盘遮挡。这样即使键盘弹起，页面头部信息也会保持在顶部固定不动。 综上所述，uni-app小程序中，可以通过监听输入框的获取焦点事件和失去焦点事件来实现键盘弹起时底部输入框跟随键盘上弹的效果，同时保持页面头部信息固定在顶部位置。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值