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

最新推荐文章于 2025-09-07 15:13:36 发布
原创 最新推荐文章于 2025-09-07 15:13:36 发布 · 1.5w 阅读 · 26 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

在uniapp中遇到软键盘弹出导致页面上移的问题，通过调整page.json中的softinputMode属性为adjustPan，并设置adjust-position为false，可以避免页面整体上移。这种方法简化了解决此问题的步骤，确保了输入框弹出键盘时不干扰页面布局。

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

  1. 发现将adjust-position属性设置为false。就可以了。前提是vue 页面 softinputMode不能是为 adjustResize
  2. 这个softinputMode属性在page.json文件中，找到需要修改的页面配置，在app-plus中找到softinputMode属性，uniapp中默认属性值是adjustPan，
  3. 后续在点击输入框，弹出的软键盘就不会把页面整体往上移了
  4. 完结-----散会o(￣▽￣)ブ
uniapp [移动端H5网页] - 强力解决弹起软键盘后页面被挤压变形或页面整体上移问题，点击input输入框键盘弹出底部被上推往上顶遮挡及各种问题（兼容安卓苹果ios手机，微信公众号网页也适用）
🏆 前端领域优质创作者
06-22 1万+
uni-app，h5网页，input输入框组件，uniapp h5软键盘弹出，uni-app 输入框，键盘弹起时页面整体上移问题，uni，H5页面，解决软键盘弹起页面被挤压、被往顶的问题，解决uni-app 输入框，键盘弹起时页面整体上移问题，uniapp调用手机系统软键盘，页面窗口被顶起，布局定位失效，解决uniapp软键盘弹起导致页面fixed定位元素被顶上去，输入法软键盘弹起，窗口顶起，变形解决办法，UniApp中input组件在IOS设备上弹出软键盘时页面整体上移问题的解决方案，以及input组件聚
uniapp微信小程序 - 解决苹果ios底部输入框被软键盘遮挡的问题，input/textarea底部输入框被弹出的软键盘挡住部分或全部遮住（解决uniApp小程序底部输入框，键盘弹起时页面整体上移
最新发布
🏆 前端领域优质创作者
09-23 4532
uniapp: IOS微信小程序输入框部分被软键盘遮挡问题，iOS微信小程序键盘弹出时输入框被挡住，uniapp小程序苹果IOS系统软键盘唤起导致底部输入框被遮挡的问题，ios 键盘弹出input输入框被遮挡，uniapp textarea输入框软键盘遮挡问题，苹果手机ios系统，解决uni-app微信小程序底部输入框，键盘弹起时页面整体上移 问题，关于手机端IOS系统微信中虚拟键盘遮挡input输入框问题的解决方案，uniapp使用输入框固定在底部键盘弹起把输入框挡住问题，安卓上没问题就苹果不行，仅ios
uniapp 软键盘将页面往上顶 vue3
yunyun1110_的博客
03-25 1284
顶部标题
uniapp点击输入框时键盘不上推页面
qq_31432773的博客
08-09 2945
设置为false，然后监听键盘的高度赋值给输入框bottom。这里还一个非常重要的地方，在根元素设置。
解决uni-app 输入框，键盘弹起时页面整体上移问题
热门推荐
weixin_42125732的博客
10-19 3万+
1.发现将adjust-position属性设置为false。就可以了。前提是vue 页面 softinputMode不能是为 adjustResize 2.这个softinputMode属性在page.json文件中，找到需要修改的页面配置，在app-plus中找到softinputMode属性，uniapp中默认属性值是adjustPan， 在pages.json里该页面注册的style里加上这段代码就能完美解决了 "style": { //手机软键盘升起不让其将页面头部上推 "app-
解决uni-app微信小程序底部输入框，键盘弹起时页面整体上移问题
Qianmoer的博客
07-04 4738
存在问题 做了一个记录页面（类似单方聊天页），输入框在底部；当弹出键盘时，页面整体上移，页面头信息会消失不见 需要实现效果： 比如一个记录页面，需要在键盘弹出时： 底部的输入框跟随键盘上弹 页面头固定在顶部不动 聊天信息区域（即内容区）调整高度，该区域局部滚动 解决方法 底部输入框fixed定位在底部，使用输入框的@focus获取键盘高度，更改输入框bottom；@blur 时恢复 bottom=0； 使用包含页面头和内容区 container的padding-bottom设置为输入框高度+输入框
解决 uni-app 微信小程序 input 输入框在底部时，键盘弹起页面整体上移问题
初遇你时动了情
08-22 3526
【代码】解决 uni-app 微信小程序 input 输入框在底部时，键盘弹起页面整体上移问题。
UniApp中input组件在IOS设备上弹出软键盘时页面整体上移问题的解决方案，以及input组件聚焦后弹出软键盘固定在软键盘上方，失去聚焦后回到原始位置。
番茄Salad
06-12 8364
问题：弹出软键盘，整体页面上移！解决：在input组件设置:adjust-position=“false”解决新问题：input组件被软键盘覆盖，没有固定在软键盘上方。解决：根据聚焦事件@focus和失去焦点事件@blur去操作输入框的bottom。ps：需要设置好输入框为固定定位或绝对定位！foot样式：设置了固定定位fixed完成上面操作后，即可伸缩自如！
解决uni-app中使用webview键盘弹起遮挡input输入框问题
九段刀客的博客
03-04 2660
这个平平无奇的回答，可能是全网最靠谱的解决方案。这里我用的是vue3 setup .vue文件的方式
uni-app制作聊天页面时，点击底部输入框弹出键盘上推页面问题解决方案
weixin_44646986的博客
01-17 6943
一，页面结构设计 先来看看聊天页面结构设计，外层布局如下： <template> <view> <!-- 消息列表 --> <scroll-view class="msg-list" scroll-y="true"> </scroll-view> <!-- 底部输入栏 --> <view class="input-box"> <input :adjust-position="false
微信小程序 - 解决软键盘弹起遮挡输入框的问题，微信小程序input输入框被弹出的软键盘遮挡住一半或全部挡住了（键盘弹起时页面整体上移导致输入框被盖住挡住一部分，textarea同样可解决适用保搞定）
🏆 前端领域优质创作者
09-07 4064
微信小程序防止输入框被键盘遮住，微信小程序软键盘弹起遮挡输入框的问题，微信小程序输入框拉起软键盘时，输入框显示不全，被软键盘挡住一半，弹出键盘时遮挡输入框，小程序苹果ios输入框被键盘遮挡，小程序底部input输入框，键盘弹起时页面整体上移问题解决，iOS微信小程序键盘弹出时输入框被挡住，微信小程序textarea软键盘遮挡解决方案，微信小程序底部输入框，键盘弹起时页面整体上移问题，input在底部时，会被弹出的键盘遮住，微信小程序弹出键盘遮挡住输入框，UniApp微信小程序页面输入框被弹出的键盘遮挡住，弹
解决uniapp键盘弹起后顶部的导航栏往上顶的问题
weixin_45600052的博客
12-21 4986
第三步：添加固定定位后，会导致该元素脱标，下面的元素往上顶。在顶部导航栏dom元素的同级 再添加一个dom元素 添加的dom元素的高和顶部导航栏的高保持一致即可。, //手机软键盘升起不让其将页面头部上推 如果所有页面都有键盘弹起的功能，可直接在 appPlus中配置，如果不是，直接在哪个页面需要配置哪个即可（建议），在appPlus中配置 "softinputMode": "adjustResize"后，有的页面没有键盘弹起的功能，会导致该页面不能滚动。uniapp中获取dom元素的方法。
uni-app H5键盘弹出整体页面上移
weixin_36756837的博客
12-04 5739
将屏幕高度视为视口高度 uni-app开发手机端输入框调出键盘，键盘弹出将页面整个顶上去 原因分析： 移动端h5页面在软键盘弹出 后，body的高度被压缩了，动态绑定body的高度即可解决，就导致原本高度100%的背景图被顶上去一截 解决方案： this.screenHeight = uni.getSystemInfoSync().windowHeight + 'px'; // 把页面高度定成视口高度 ...
关于在uni-app中键盘弹出页面内容被顶走的问题和内容总是保持在底部
justforcode1的博客
08-16 1772
事件来控制input的移动但是使用这个会导致input框显示有延迟，后面找了一下文档中提供了监控键盘高度变化的事件。在此之前找了很多文档看了对键盘的处理很多都是利用了input上的聚焦。
uniapp开发中 解决App端 点击input输入框 整体上移
m0_64520392的博客
08-06 654
uniapp开发中 解决App端 点击input输入框 整体上移
解决uniapp软键盘弹起导致页面fixed定位元素被顶上去
tt1234561009的博客
05-09 4465
在移动端开发中通常导航栏需要固定在页面的最顶端，但当页面中有输入框且dom元素较多时，点击输入框弹出软键盘会促使导航栏往上移正常情况如图一所示，软键盘弹起如图二所示图一图二。
解决uni-app微信小程序input输入框在底部时，键盘弹起页面整体上移问题
xiamoziqian的博客
06-09 1万+
解决uni-app微信小程序input输入框在底部时，键盘弹起页面上移问题
uniapp使用输入框固定在底部键盘弹起把输入框挡住问题
FUFCY的博客
09-29 2276
uniapp使用输入框固定在底部键盘弹起把输入框挡住问题
解决uni-app微信小程序底部input输入框，键盘弹起时页面整体上移问题
梅花寺
02-07 7478
由于获取的系统的尺寸单位都是 px ，给 bottom 设置的值单位也一定要是 px!不能因为是手机端就用 rpx，2倍的 rpx 也不可以，因为并不是每个手机分辨率都是我们设计图上375的2倍，一定要用 px 啊！最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
uniapp微信小程序 - 解决输入框input软键盘弹起时页面整体上移问题，
05-07
<think>嗯，用户现在的问题是关于解决在uni-app开发的微信小程序中，当输入框软键盘弹起时页面整体上移的情况。我需要结合提供的引用和之前的知识来思考解决方案。 首先，用户提到参考的引用中有几个关键点。引用[2]中提到，在子组件的input组件中设置adjust-position为false，这样可以阻止页面自动调整导致上移。同时，通过监听focus和blur事件，获取键盘高度，并动态调整布局的bottom值。这里需要注意的是，设置高度时要加上'px'单位，否则可能无效。这一点很重要，用户可能之前没有注意到单位的问题，导致解决方案失效。 引用[3]则提到了在iOS中使用keyboardheightchange事件来获取键盘高度，然后调整布局。不过，这个事件可能在部分安卓机型上不兼容，所以可能需要结合其他方法。例如，在focus事件中获取键盘高度，并动态设置样式。 接下来，我需要考虑用户的具体情况。用户使用的是uni-app框架，所以需要确保代码兼容小程序平台。首先，检查input组件的属性是否正确设置，如adjust-position="false"。这一步是基础，阻止默认的页面调整行为。 然后，处理键盘弹起时的布局调整。可能需要将输入框固定在页面底部，当键盘弹起时，通过计算键盘高度，将输入框容器向上推移，避免被遮挡。这里需要注意不同平台的差异，比如iOS和安卓的键盘高度获取方式可能不同。引用[3]提到iOS可以用keyboardheightchange，而安卓可能需要通过focus事件中的detail.height来获取。 此外，动态样式绑定时，要确保使用px单位，否则在某些机型上可能无法正确解析。例如，将bottom值设置为键盘高度加上'px'，如'300px'，而不是纯数字。 还需要考虑页面滚动的问题。如果页面内容较长，键盘弹起时可能会影响滚动位置。可能需要设置页面的高度，或者在键盘弹起时禁止滚动，避免布局错乱。 最后，测试不同机型的兼容性，尤其是全面屏手机，因为它们的键盘高度和屏幕比例可能与普通手机不同。确保调整后的布局在各种设备上都能正常显示，输入框不会被键盘遮挡，同时页面不会整体上移。 总结步骤：设置adjust-position为false，监听键盘事件获取高度，动态调整输入框容器的位置，使用px单位，处理不同平台的兼容性问题，并进行全面测试。</think>针对uniapp微信小程序输入框软键盘弹起导致页面整体上移的问题，可通过以下步骤解决： ### 一、核心解决方案 1. **禁用页面自动调整** 在input组件添加`adjust-position="false"`属性，禁用系统默认的页面调整行为 ```vue <input :adjust-position="false" @focus="inputFocus" @blur="inputBlur"> ``` 2. **动态布局调整** ```vue <view :style="{ paddingBottom: keyboardHeight + 'px' }"> <input :adjust-position="false" @focus="inputFocus" @blur="inputBlur" @keyboardheightchange="keyboardHeightChange"> </view> ``` 3. **键盘事件处理** ```javascript export default { data() { return { keyboardHeight: 0 } }, methods: { // 兼容iOS的键盘高度获取[^3] keyboardHeightChange(e) { this.keyboardHeight = e.detail.height }, // 兼容Android的键盘高度获取[^2] inputFocus(e) { if(!e.detail.height) return this.keyboardHeight = e.detail.height }, inputBlur() { this.keyboardHeight = 0 } } } ``` ### 二、注意事项 1. **单位强制转换**：必须添加`px`单位后缀，纯数字值在某些机型会失效 2. **滚动容器处理**：页面容器需设置`height: 100vh`防止内容挤压 3. **全面屏适配**：安卓全面屏需额外处理安全区域，可使用`env(safe-area-inset-bottom)` ### 三、优化方案 1. **防抖处理**：添加200ms延迟避免快速切换导致的布局抖动 ```javascript inputFocus(e) { setTimeout(() => { this.keyboardHeight = e.detail.height || 0 }, 200) } ``` 2. **过渡动画**：添加CSS过渡效果提升用户体验 ```css .input-container { transition: padding-bottom 0.3s ease; } ```
评论 4
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值