uniapp固定在最底部的input评论框弹起键盘会有遮挡效果解决方式

最新推荐文章于 2026-06-04 10:44:13 发布
原创 最新推荐文章于 2026-06-04 10:44:13 发布 · 5.2k 阅读 · 8 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#vue.js #uni-app #微信小程序 #前端

通过给view或者input标签样式：position: fixed;把input固定在底部。点击input框后弹出键盘会导致遮挡住消息框。

解决关键：举个栗子=》

:adjust-position='true'

这个关键的样式放在input标签后。触发键盘弹起后，会把页面上顶。简单方便。解决弹出键盘后input框被遮挡的问题。

例图：

看见这个栗子了没有？  我也没看见

从此不再担心键盘遮住输入框(OC)
04-05
源码KeyboardToolBar，从此不再担心键盘遮住输入框(OC)，想必大家在iOS开发中都有遇到过这种问题。点击输入框后，弹出的键盘遮挡了输入框，然后你就无法看见你输入了什么。为了解决这个问题，我也在网上花了不少时间去找相关的代码以及实现。 找到的相关内容很多，但是都有一个共同点，是通过将底部的View上滑至键盘之上，从而可以看见输入框内的内容。在这方面做得好的有IQKeyboardManager，喜欢的可以去看看，但是我不是就直接采用了IQKeyboardManager，而是自己写了一个键盘组件KeyboardToolBar，优点是小巧易使用
uniapp微信小程序 - 解决输入框input软键盘弹起时页面整体上移问题，页面上推导致顶部出现元素遮挡问题，uniapp软键盘导致页面上移头部内容被错位遮住错乱，让页面头固定在顶部不动不会受影响！
热门推荐
✅ 精选推荐文章
04-29 1万+
解决uni-app微信小程序底部input输入框，键盘弹起时页面整体上移问题，当键盘弹起时，会导致页面整体上移，页面头固定在顶部不动，微信小程序键盘弹起时,底部输入框抬起至键盘上方,顶部导航栏固定不动，uni-app输入框，输入框在底部；当弹出键盘时，页面整体上移，页面头信息会消失不见，小程序底部input输入框，input组件弹起系统键盘时，键盘会顶住页面导致页面会上移，当键盘弹起时整个页面被挤压,导致元素上移或被覆盖，输入框能自动抬起至键盘上方,顶部导航栏保持固定,不被顶上去，如何解决这个问题，动态高度
uniapp input 被键盘遮挡的解决方案
WangYan的博客
03-16 5162
在uniapp登录页遇到了input被键盘遮挡的和一点击输入框（或两个输入框来回切换输入）页面就闪现刷新的问题。闪现/刷新：用uniapp自身的。标签，替换uview的。遮挡：增加三个标签属性。
解决uniapp在App环境下输入框被软键盘遮挡的问题
qq_41120857的博客
12-04 5033
adjustResize：软键盘弹出时，webview窗体高度挤压。屏幕高度=webview窗体高度+软键盘高度。adjustPan：软键盘弹出时，webview窗体高度不变，但窗体上推，以保证输入框不被软键盘盖住。缺点：软键盘在弹出时会因为webview的重绘，导致软键盘所处区域在未显示完全时显示黑底。以下为官方对keyboardheightchange事件的解释。在页面的pages.json中的style中做以下修改。keyboardheightchange 方法。在代码中添加如下处理。
uniapp使用输入框固定在底部键盘弹起把输入框挡住问题
FUFCY的博客
09-29 2352
uniapp使用输入框固定在底部键盘弹起把输入框挡住问题
解决uni-app微信小程序底部输入框，键盘弹起时页面整体上移 问题
小羊的博客
10-12 1万+
解决uni-app微信小程序底部输入框，键盘弹起时页面整体上移 问题 转发自https://www.cnblogs.com/XHappyness/p/13528236.html#4703250 存在问题 做了一个记录页面（类似单方聊天页），输入框在底部；当弹出键盘时，页面整体上移，页面头信息会消失不见 需要实现效果： 比如一个记录页面，需要在键盘弹出时： 底部的输入框跟随键盘上弹 页面头固定在顶部不动 聊天信息区域（即内容区）调整高度，该区域局部滚动 解决方法 底部输入框fixed定位在底部，使用输
UniApp评论框被键盘顶飞？手把手教你用cursor-spacing和adjust-position完美适配
最新发布
weixin_30268921的博客
06-04 395
本文详细解析了UniApp中解决评论框被软键盘遮挡问题的终极方案，重点介绍了`cursor-spacing`和`adjust-position`属性的巧妙运用。通过实战案例展示如何实现输入框与键盘的完美适配，提升移动端用户体验，同时对比传统键盘高度计算方案的不足，帮助开发者高效解决跨平台兼容性问题。
uniapp 完美解决苹果和安卓 input 框遮挡兼容问题
颜良文丑的博客
04-18 5056
小程序项目用到IM即时通讯功能，苹果和安卓出现input输入框被软键盘遮挡的情况。
UniApp H5/小程序键盘弹起页面抖动？试试这3个Input属性配置
weixin_26905487的博客
04-16 422
本文深入探讨了UniApp开发中H5/小程序键盘弹起导致的页面抖动问题，提供了3个关键Input属性配置（always-embed、adjust-position、cursor-spacing）的详细解决方案。通过跨平台适配策略和性能优化技巧，有效解决键盘遮挡引发的布局问题，提升用户体验。
uniapp软键盘遮挡输入框问题
a666666000的博客
07-05 4287
【代码】uniapp软键盘遮挡输入框问题。
uniapp输入框被键盘遮挡及热更新
a806488840的博客
05-19 1546
用plus.downloader.createDownload+plus.runtime.install方法解决。1.这里要用apk包，我之前用HBuild生成的wgt一直没反应，也有可能是我没把app放到应用市场的原因咯。然后web-view的高度不能设置定高，可以用top和bottom来间接的设置高。2.打包的时候包名要与上个版本的包名统一，否则会被认为不是一个app。1，解决web-view中网页的输入框被键盘遮挡。需要在manifest.json文件中设置。2.解决uniapp热更新。
在uniapp中当输入框input使用固定定位在底部 用户获取焦点时输入框会被弹起的键盘所遮住的问题
qq_1401820561的博客
03-15 1455
在 Uniapp 开发中，当输入框使用固定定位（）放置在页面底部时，用户点击输入框获取焦点后，输入框可能会被弹出的键盘遮挡，影响用户体验。
uniapp: IOS微信小程序输入框部分被软键盘遮挡问题
q1003675852的博客
11-14 2823
本文主要记录uniapp: IOS微信小程序输入框部分被软键盘遮挡问题及解决方案
uniapp textarea输入框软键盘遮挡问题
jiaxiaohong_csdn的博客
03-06 1070
1、导航栏设置固定定位top:0，padding-top为menuButtonBounding.top,height为menuButtonBounding.height;之前设置了底部元素一个固定高度150rpx,也监听了软键盘高度变化并设置软键盘高度值，具体代码如下。由于我这个组件是分开写的所以用到了emit传值，在父组件中拿到这个高度设置底部框高度为该自身高度+软键盘高度即可。动态设置底部输入框部分高度为固定高度150 + 软键盘高度 keyboardHeight的值；// 监听发送栏高度。
解决uniapp，textarea拉起页面被顶起和键盘被输入框遮挡的问题。
qq_41851047的博客
06-25 4060
1：Android、ios 同事2解决；2：我们在开发的时候会发现textarea或者input拉起键盘的时候整个页面被顶起了，header也被顶没了；官方给了:adjustPosition='false'属性，设置完之后页面就不会被顶起，但是键盘把输入框挡住了，就很恶心；3：我的实现思路是，adjustPosition='false'；用@keyboardheightchange监听键盘的高度；在textarea下面给一个view标签并且加高度；
解决uni-app中使用webview键盘弹起遮挡input输入框问题
九段刀客的博客
03-04 2857
这个平平无奇的回答，可能是全网最靠谱的解决方案。这里我用的是vue3 setup .vue文件的方式
解决uni小程序在IOS端input框被软键盘‘挤上去’的问题
qq_43549412的博客
04-28 2894
结果是能解决 但处理的方式不好，会留出很大的空隙，影响美观，后面又产生在input获取焦点和失去焦点上想办法 做处理但这样的感觉会跳一下，觉得不是很好，让弹出框滑动出软键盘的高度，参考的很多办法，实现起来无疑同ui说，帮我重新设计一下，bug改好等于重做。本人前端小白一枚，偶然遇到在ios端input框被遮挡的问题，十分苦恼，也尝试了很多解决办法但都不是很有效，最后在一位大牛的帮助下得到解决，想记录一下分享一下，如果你也遇到可以尝试一样看看！若有更好的解决办法，还望告知！然后给父元素动态添加高度就可以了。
uni-app底部输入框被软键盘部分挡住的解决方案
weixin_41891519的博客
02-24 9510
前提 要引入uni.css 解决方案 在输入框加上class=“uni-input” 和cursor-spacing=“0”（一定要两个一起加上，不然还是会挡住部分的） <input class="uni-input" cursor-spacing="0"/> cursor-spacing 指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spac...
uni-app的爬坑记
Front小思的博客
08-28 2602
1、input的placeholder样式无法直接覆盖 使用placeholder-class属性设置一个类名，再用该类名写样式去覆盖掉原有的样式 <input type="text" v-model="searchName" placeholder="请输入名字" placeholder-class="search-placeholder"/> 2、页面底部键盘问题 软键盘弹出有adjustResize|adjustPan 两种模式，现在uni-app推荐adjustResiz.
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值