uniapp(全端兼容) - 实现点击输入框时完美顶起键盘，获取键盘高度动态计算顶起距离，解决软键盘弹出时输入框被覆盖问题，uniapp微信小程序/移动端h5网页/安卓苹果app（示例代码，一键复制

已于 2024-09-12 15:34:18 修改
阅读量7.2k 收藏 10
点赞数 17
分类专栏： 前端组件与功能(开箱即用) uniapp组件与功能(工作经验) uniapp常见问题解决 文章标签： uni-app 软键盘弹出后覆盖了输入框 点击输入框后键盘弹出导致遮挡了 inpu激活后键盘弹出位置不对 ios苹果手机键盘遮挡输入框 获取软键盘高度后自定义弹出距离 uni最强详细解决遮罩遮挡问题
于 2024-03-07 15:02:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_50545213/article/details/136533830
版权

效果图

在uniapp小程序/h5网页网站/安卓苹果app/nvue等（全平台完美兼容）开发中，完美解决input输入框激活时软键盘从底部弹出遮挡问题，采用获取键盘高度动态计算每个平台下的弹出高度，彻底消除各平台端的弹出距离不一致、有差异的问题！

还能彻底解决软键盘顶不起来输入框的问题，有时候点击input输入框时键盘弹出来后，输入框还在最底下没弹出来。

uniapp Vue3和Vue2都能用，详细示例代码，一键复制运行后稍微改下就能用了！

在这里插入图片描述

完整代码

如下完整源码所示，可复制运行看效果。

了解本专栏 订阅专栏 解锁全文
uniapp微信小程序 - 解决输入框input软键盘弹起时页面整体上移问题，页面上推导致顶部出现元素遮挡问题，uniapp软键盘导致页面上移头部内容被错位遮住错乱，让页面头固定在顶部不动不会受影响！
高级前端工程师
04-29 1万+
解决uni-app微信小程序底部input输入框，键盘弹起时页面整体上移问题，当键盘弹起时，会导致页面整体上移，页面头固定在顶部不动，微信小程序键盘弹起时,底部输入框抬起至键盘上方,顶部导航栏固定不动，uni-app输入框，输入框在底部；当弹出键盘时，页面整体上移，页面头信息会消失不见，小程序底部input输入框，input组件弹起系统键盘时，键盘会顶住页面导致页面会上移，当键盘弹起时整个页面被挤压,导致元素上移或被覆盖，输入框能自动抬起至键盘上方,顶部导航栏保持固定,不被顶上去，如何解决这个问题，动态高度
uniapp H5 和 App 中软键盘高度的获取方案与函数代码封装 通用教程 兼容各端
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
11-25 580
App 端：通过框架提供的接口，简单且稳定。H5 端：通过获取软键盘弹出后的视窗高度变化，兼容性较好，同时对不支持的浏览器提供了降级方案。封装与复用：提供统一的监听与解绑接口，便于在多项目中直接使用。通过以上封装，可以有效解决 H5 端软键盘高度获取的问题，同时保证代码结构清晰、易于维护。
uniapp之app、微信小程序实现输入框发送消息键盘不收起、解决iOS端键盘弹起遮挡输入框问题
qq_55460954的博客
11-29 7144
uniapp微信小程序、APP输入框发送消息不失焦问题解决，uniapp iOS键盘遮挡输入框问题解决
uniapp软键盘遮挡输入框问题
a666666000的博客
07-05 3979
【代码】uniapp软键盘遮挡输入框问题。
解决uni-app微信小程序底部输入框，键盘弹起时页面整体上移 问题
小羊的博客
10-12 1万+
解决uni-app微信小程序底部输入框，键盘弹起时页面整体上移 问题 转发自https://www.cnblogs.com/XHappyness/p/13528236.html#4703250 存在问题 做了一个记录页面（类似单方聊天页），输入框在底部；当弹出键盘时，页面整体上移，页面头信息会消失不见 需要实现效果： 比如一个记录页面，需要在键盘弹出时： 底部的输入框跟随键盘上弹 页面头固定在顶部不动 聊天信息区域（即内容区）调整高度，该区域局部滚动 解决方法 底部输入框fixed定位在底部，使用输
基于uni-app+vue3渲染markdown格式|uniapp软键盘顶起问题解决方案
Gefangenes的博客
07-10 1705
前些时候有给大家分享一篇项目。今天主要分享下在uniapp中渲染markdown语法及uniapp中软键盘弹起，页面tabbar或顶部自定义navbar导航栏被撑起挤压的问题。如上图：支持渲染。上面则是演示了在App端+小程序端键盘弹起，整体页面及自定义导航条不会被顶跑的问题。好了，话不多说，接下来就主要介绍下如何实现的吧。
uniapp获取键盘高度顶起底部输入框
weixin_51526447的博客
12-19 3304
uniapp获取键盘高度顶起底部输入框
uniapp 获取键盘高度
qq_43402051的博客
04-01 7906
uni.onKeyboardHeightChange((obj)=>{ let _sysInfo = uni.getSystemInfoSync(); let _heightDiff = _sysInfo.screenHeight - _sysInfo.windowHeight let _diff = obj.height - _heightDiff this.bottomHeight = (_diff > 0 ? _diff : 0) - 2 + "px"; })
uniapp H5页面键盘弹起时获取键盘高度，内容自动滚动
peachban的博客
11-06 6220
需求：页面上半部分是固定的，下半部分是可以滚动的，下半部分是一个可以输入的表单。当点击input框输入的时候，手机会弹起输入框，输入框会遮挡下半部分界面。整个页面为了防止滑动，最大容器上都加了固定定位。手机弹起输入框以后，页面会在除了键盘高度的界面可以滚动。App平台软键盘弹出有 adjustResize|adjustPan 两种模式，默认为 adjustPan 模式，小程序平台只支持 adjustPan 模式，H5平台因不同浏览器而异。
uniApp 取安卓软键盘高度及设置
onlylele的博客
05-12 1881
当手机输入内容时会弹出系统默认的软件盘，此时可能导致其他整体的页面内容上移而覆盖到工具栏或者软件盘直接覆盖了底部的部分内容；
uniapp开发抖音小程序监听键盘弹起keyboardheightchange，并获取键盘高度（全网第一唯一成功案例，你问ai都没用）
LLL3189860667的博客
04-16 1774
在之后，我去浏览了抖音小程序的相关文档，发现input的event中有一个bindkeyboardheightchange,最开始，我以为看到了曙光，直接去使用，然而，很遗憾又踩了一次坑，直接使用它根本不会触发。废话不多说，今天也是整上了uniapp开发小程序适配抖音端，由于项目需要做出点击输入框，键盘顶起输入框的效果，所以需要监听到键盘弹起，然后获取键盘的高度，作为属性设置到输入框的css样式当中，方可达到需求效果。之后，我抱着试一试的心态，想着试一试this.$nextTick,没想到，成了！
弹出键盘,监听键盘高度
04-26
在我们开发中,经常用到评论等功能,在下方一个TextField,但是弹出键盘,评论框也要弹起,这时候要监听高度,本代码可完美实现此功能
uniapp(全端兼容) - 最新详细实现支付键盘功能组件，从底部弹出数字键盘输入支付密码进行付款交互效果，自定义支付密码键盘仿微信、支付宝支付键盘，1~9密码数字键盘，电商支付（详细示例代码复制运行
高级前端工程师
07-11 2557
uniapp，微信小程序，自定义数字键盘，输入支付密码的键盘组件，uniapp小程序如何实现从底部弹出输入支付密码自定义键盘功能，uniapp小程序密码支付键盘组件插件，自定义数字键盘输入页面，怎么封装底部弹窗自定义数字键盘用于输入支付密码，uniapp小程序仿类似电商支付密码输入模态框，uniapp微信小程序平台实现自定义支付密码键盘，uniapp 密码支付，数字键盘,安全键盘,交易键盘,交易密码,交易密码输入框，uniapp自定义支付键盘: uniapp自定义支付键盘，uniapp小程序端实现键盘输入支
uniapp - [全端兼容] 手机数字键盘没有小数点，当 input 输入框的 type 属性设置 number 后，手机系统的软键盘无法输入小数点和符号问题（此方案 uniapp 全端全平台适用）
热门推荐
高级前端工程师
05-13 1万+
uniapp键盘无法输入小数点符号，uniapp键盘没有小数点，uniapp手机软键盘没有小数点，uniapp input设为number时键盘没有小数点，uniapp小程序调取数字键盘没有小数点解决办法，uniapp手机网页h5 安卓app 微信小程序 nvue解决键盘无法输入小数点的问题，uniapp苹果ios键盘上没小数点.怎么办，uniapp input number无法输入小数点，uniapp IOS数字键盘没有小数点，uniapp数字键盘为什么没有小数点，uniapp小程序app h5 inpu
uniapp(全端兼容) - 最新详细实现水印相机功能，手机调起摄像头拍照时自动插入文字、图片动态水印效果，支持水印显示拍摄者当前城市定位、自由调整水印大小和位置（uniapp全平台通用，详细示例源码
高级前端工程师
04-17 1万+
uniapp，微信小程序，h5网页网站，安卓苹果app，nvue，支付宝小程序，手机摄像头拍照时加入自定义水印，文字水印，图片水印，如何对拍摄的照片加水印，怎么在相机拍照时加入水印，小程序怎么做拍照时加水印，uni-app安卓苹果App右下角自动加入水印，uniapp拍照时加水印，实现水印相机，uni-app拍照加水印，使用uni-app实现实时拍照/视频并添加水印，拍照自动添加水印，uniapp拍照加水印的插件，如何拍照时放水印，怎么插入水印，uniapp拍摄时插入透明水印，uniapp vue相机添加水
uniapp(全端兼容) - 最新实现车牌号键盘与格子间隔显示组件，汽车牌照录入支持自定义样式、新能源等，uniapp全平台可用的汽车车牌号键盘输入功能（附带组件完整源码，开箱即用，稍微改改就能用）
高级前端工程师
04-12 4593
uniapp车牌组件，uniapp h5 小程序 app车牌号键盘，uniapp h5 小程序 app汽车牌照，uniapp h5 小程序 app车牌号输入功能插件，uniapp车牌号插件，uniapp实现车牌号输入框，uniapp app车牌号输入键盘功能源码，，uni-app 实现 车牌键盘，uniapp 车牌号输入 车牌号键盘 新能源车牌键盘 特殊车辆车，uni-app小程序车牌号键盘，uni-app + uview 车牌键盘，uniapp添加车牌组件的实现与使用，uniappH5 调起车牌号码键盘，
在uniapp中当输入框input使用固定定位在底部 用户获取焦点时输入框会被弹起的键盘所遮住的问题
qq_60743005的博客
03-15 635
在 Uniapp 开发中，当输入框使用固定定位（）放置在页面底部时，用户点击输入框获取焦点后，输入框可能会被弹出的键盘遮挡，影响用户体验。
自定义键盘支付：u-keyboard、u-message-input
sunluyi的博客
03-18 2023
<!-- 余额支付输入密码 --> <u-keyboard default="" ref="uKeyboard" mode="number" :mask="true" :mask-close-able="false" :dot-enabled="false" v-model="paypasswordShow" :safe-area-inset-bottom="true" :tooltip="false" @change="onChange" @bac
Vue3 - 移动端H5网页点击输入框弹出软键盘后，收起后页面无法复原的问题，页面没能恢复原状+遮盖遮挡+布局出现上移或下移整体未复原到打开软键盘之前（解决弹出键盘导致页面布局错乱，安卓+苹果ios）
最新发布
王二红
04-07 6822
vue3，移动端网页，输入框弹起软键盘，收起后导致页面无法复原的问题，输入框弹起软键盘，收起后导致页面无法复原的问题，vue3移动端的软键盘对页面css布局影响的解决办法-底部样式被顶起，弹起键盘遮盖输入框键盘弹起后不恢复，键盘不收回，input输入时软键盘弹起不能自动收回，Vue3页面中input输入框弹起软键盘，收起后会导致页面被顶起，无法复原，H5移动端键盘收起后页面上移不复位，软键盘弹出，布局没有上移，弹出软键盘的时候页面顶起不恢复，vue3实现移动端自动弹起软键盘，软键盘挡住输入框的解决方案，移动
uniapp 点击按钮唤起键盘
03-25
### UniApp 中通过点击按钮唤起软键盘的实现 在 UniApp 开发中，可以通过设置 `focus` 属性来控制输入框获取焦点并触发软键盘弹出。以下是具体实现方式： #### HTML 结构 定义一个 `<input>` 输入框以及一个用于触发软键盘弹出的按钮。 ```html <view> <button @click="triggerKeyboard">点击唤起软键盘</button> <input type="text" ref="inputRef" style="display:none;" /> </view> ``` #### JavaScript 方法 利用 Vue 的 `$refs` 来动态操作 DOM 节点，使输入框获得焦点从而唤起软键盘。 ```javascript export default { methods: { triggerKeyboard() { this.$nextTick(() => { // 确保 DOM 已更新后再执行 focus 操作 const input = this.$refs.inputRef; if (input && typeof input.focus === 'function') { input.focus(); // 设置输入框为聚焦状态以唤起软键盘 } }); }, }, }; ``` 上述代码片段展示了如何通过绑定事件监听器，在用户点击按钮时让隐藏的输入框自动获取焦点[^1]。需要注意的是，为了不影响页面布局，可以将该输入框样式设为不可见 (`style="display:none;"`) 或者将其放置于页面底部区域而不影响其他 UI 元素显示效果。 另外一种情况涉及 PDA 设备上可能存在的特殊需求——即希望避免因默认行为而导致全屏覆盖式软键盘出现，则需额外配置相关属性或调整逻辑处理流程[^2]。 对于某些场景下可能出现的输入框被软键盘遮挡问题，可通过合理设置组件参数解决，例如使用 `cursor-spacing` 定义光标与可视边界之间的距离防止内容被掩盖[^3]。 ### 注意事项 - 如果目标平台支持自定义键盘功能（如 Android），则可进一步探索更灵活交互方案； - 需测试不同设备上的表现差异，确保兼容性和用户体验一致性；
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

十一猫咪爱养鱼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值