uniapp，app端时input组件弹起系统键盘时，键盘会顶住页面导致页面会上移

最新推荐文章于 2025-06-22 20:56:09 发布
原创 最新推荐文章于 2025-06-22 20:56:09 发布 · 2.4k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#uni-app #javascript #前端

当使用uniapp开发App时，遇到input组件弹出键盘挤压页面的问题，可以调整键盘弹出模式。在App平台，可设置软输入键盘模式为adjustResize，防止键盘顶上页面。而在小程序平台，只支持adjustPan模式。H5平台则因浏览器差异需特殊处理，配置可在pages.json的app-plus节点下进行。

uniapp，app端时input组件弹起系统键盘时，键盘会顶住页面导致页面会上移

这个时候，我们可以修改键盘的弹出模式。
App平台软键盘弹出有 adjustResize|adjustPan 两种模式，默认为 adjustPan 模式，小程序平台只支持 adjustPan 模式，H5平台因不同浏览器而异
配置方式，在 pages.json 中配置 style

"app-plus": {
	"softinputMode": "adjustResize"
}

官方描述:修改系统键盘的模式

小秧@
关注
uniapp iOS键盘弹出,手机浏览器中h5页面整体上移问题
sinat_41657240的博客
07-07 3157
最近做了一个项目，要求在移动端的浏览器中打开我们的系统，进行数据操纵，使用uniapp+vue 为整体框架 问题：登陆页面底部logo使用flexd 布局方式，在android打开么没有提，但是在iOS 10 中键盘弹出,手机浏览器中h5页面整体上移，百度了一下，可以看一下这篇文章 https://www.jianshu.com/p/f5253b3ab100 主要的原因是应为部分ios系统不支持window.resize ...
解决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微信小程序底部input输入框，键盘弹起时页面整体上移问题
梅花寺
02-07 7470
由于获取的系统的尺寸单位都是 px ，给 bottom 设置的值单位也一定要是 px!不能因为是手机端就用 rpx，2倍的 rpx 也不可以，因为并不是每个手机分辨率都是我们设计图上375的2倍，一定要用 px 啊！最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
【uniapp】input框置底，手机端弹出键盘时页面整体上移，解决方案
L_xxxxxxx的博客
02-19 1012
【uniapp】input框置底，手机端弹出键盘时页面整体上移，解决方案
uniapp 使用input软键盘弹出时将input框内容上移的问题
weixin_44639993的博客
01-16 2754
由于input框默认开启软键盘上顶功能，但是页面又固定了高度，导致input上顶了页面没上顶。
解决 uni-app 微信小程序 input 输入框在底部时，键盘弹起页面整体上移问题
初遇你时动了情
08-22 3510
【代码】解决 uni-app 微信小程序 input 输入框在底部时，键盘弹起页面整体上移问题。
解决uniapp键盘弹起后顶部的导航栏往上顶的问题
weixin_45600052的博客
12-21 4966
第三步：添加固定定位后，会导致该元素脱标，下面的元素往上顶。在顶部导航栏dom元素的同级 再添加一个dom元素 添加的dom元素的高和顶部导航栏的高保持一致即可。, //手机软键盘升起不让其将页面头部上推 如果所有页面都有键盘弹起的功能，可直接在 appPlus中配置，如果不是，直接在哪个页面需要配置哪个即可（建议），在appPlus中配置 "softinputMode": "adjustResize"后，有的页面没有键盘弹起的功能，会导致该页面不能滚动。uniapp中获取dom元素的方法。
uniapp微信小程序键盘弹起导致页面上移
RainHg的博客
05-08 659
问题：聊天页面，如果输入框设置了adjust-position属性为true，会导致键盘弹起时，整个页面上移，顶部导航栏也会跟着上移。我想要的效果：键盘弹起时，页面内容上移，顶部导航栏保持不动。
uni-app H5键盘弹出整体页面上移
weixin_36756837的博客
12-04 5736
将屏幕高度视为视口高度 uni-app开发手机端输入框调出键盘，键盘弹出将页面整个顶上去 原因分析： 移动端h5页面在软键盘弹出 后，body的高度被压缩了，动态绑定body的高度即可解决，就导致原本高度100%的背景图被顶上去一截 解决方案： this.screenHeight = uni.getSystemInfoSync().windowHeight + 'px'; // 把页面高度定成视口高度 ...
uni-app 键盘弹出页面上移 解决uni-app 底部输入框，键盘弹起时页面整体上移 问题 和 uniapp ios左侧滑动返回上一页
weixin_48379719的博客
06-24 5584
uni-app 键盘弹出页面上移 解决uni-app 底部输入框，键盘弹起时页面整体上移 问题 和 uniapp ios左侧滑动返回上一页
uniapp里input输入时软键盘弹起将页面顶起，导致头部navbar隐藏问题
qq_43619233的博客
09-25 1006
描述：在APP中使用u-input或者u-textarea时，获取焦点会唤起键盘，导致顶部的u-navbar或者自定义的顶部标题栏被高度撑起消失。解决：“app-plus”: {
记录uniapp移动端聊天页面点击输入框弹出键盘后把整体页面顶上去的问题
wffcn的博客
10-21 1897
修改方法：在pages.json里加一行app-plus里的代码就行了。点击输入框后会把整体内容往上推。
uniapp h5中输入框输入时，会将内容顶上去的解决方案
maohangfei.cn
05-05 8162
h5中输入框输入时会导致键盘将页面顶上去，本文章写了完整的解决方案，以及思路提供参考 （监听键盘的打开和关闭事件）
解决uni-app微信小程序底部输入框，键盘弹起时页面整体上移问题
Qianmoer的博客
07-04 4733
存在问题 做了一个记录页面（类似单方聊天页），输入框在底部；当弹出键盘时，页面整体上移，页面头信息会消失不见 需要实现效果： 比如一个记录页面，需要在键盘弹出时： 底部的输入框跟随键盘上弹 页面头固定在顶部不动 聊天信息区域（即内容区）调整高度，该区域局部滚动 解决方法 底部输入框fixed定位在底部，使用输入框的@focus获取键盘高度，更改输入框bottom；@blur 时恢复 bottom=0； 使用包含页面头和内容区 container的padding-bottom设置为输入框高度+输入框
UniApp中input组件在IOS设备上弹出软键盘时页面整体上移问题的解决方案，以及input组件聚焦后弹出软键盘固定在软键盘上方，失去聚焦后回到原始位置。
番茄Salad
06-12 8352
问题：弹出软键盘，整体页面上移！解决：在input组件设置:adjust-position=“false”解决新问题：input组件被软键盘覆盖，没有固定在软键盘上方。解决：根据聚焦事件@focus和失去焦点事件@blur去操作输入框的bottom。ps：需要设置好输入框为固定定位或绝对定位！foot样式：设置了固定定位fixed完成上面操作后，即可伸缩自如！
uniapp微信小程序 - 解决输入框input软键盘弹起时页面整体上移问题，页面上推导致顶部出现元素遮挡问题，uniapp软键盘导致页面上移头部内容被错位遮住错乱，让页面头固定在顶部不动不会受影响！
高级前端工程师
04-29 1万+
解决uni-app微信小程序底部input输入框，键盘弹起时页面整体上移问题，当键盘弹起时，会导致页面整体上移，页面头固定在顶部不动，微信小程序键盘弹起时,底部输入框抬起至键盘上方,顶部导航栏固定不动，uni-app输入框，输入框在底部；当弹出键盘时，页面整体上移，页面头信息会消失不见，小程序底部input输入框，input组件弹起系统键盘时，键盘会顶住页面导致页面会上移，当键盘弹起时整个页面被挤压,导致元素上移或被覆盖，输入框能自动抬起至键盘上方,顶部导航栏保持固定,不被顶上去，如何解决这个问题，动态高度
解决uniapp软键盘弹起导致页面fixed定位元素被顶上去
tt1234561009的博客
05-09 4438
在移动端开发中通常导航栏需要固定在页面的最顶端，但当页面中有输入框且dom元素较多时，点击输入框弹出软键盘会促使导航栏往上移正常情况如图一所示，软键盘弹起如图二所示图一图二。
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 软键盘将页面往上顶 vue3
yunyun1110_的博客
03-25 1277
顶部标题
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值