UniApp中input组件在IOS设备上弹出软键盘时页面整体上移问题的解决方案，以及input组件聚焦后弹出软键盘固定在软键盘上方，失去聚焦后回到原始位置。

已于 2023-06-12 17:21:39 修改
阅读量7.6k 收藏 17
点赞数 4
分类专栏： uniapp学习笔记 文章标签： uni-app
于 2023-06-12 17:13:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44912902/article/details/131172596
版权
在input组件设置adjust-position=false防止页面整体上移，通过@focus和@blur事件处理输入框的bottom属性以避免被软键盘覆盖，确保输入框为固定或绝对定位。对于iOSApp，可通过设置softinputNavBar:none去掉软键盘上方的横条，此配置可在pages.json中或通过js动态设置。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

问题：弹出软键盘，整体页面上移！

在这里插入图片描述

解决：在input组件设置:adjust-position=“false”

在这里插入图片描述

解决

新问题：input组件被软键盘覆盖，没有固定在软键盘上方。

在这里插入图片描述

解决：根据聚焦事件@focus和失去焦点事件@blur去操作输入框的bottom。ps：需要设置好输入框为固定定位或绝对定位！

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

foot样式：设置了固定定位fixed

在这里插入图片描述

完成上面操作后，即可伸缩自如！

在这里插入图片描述
此外：
App平台iOS端软键盘上方横条去除方案
app-vue在iOS上，webview中的软键盘弹出时，默认在软键盘上方有一个横条，显示着：上一项、下一项和完成等按钮。 如不想显示这个横条，可以配置softinputNavBar: ‘none’

配置方式，在 pages.json 中某个页面或全局配置 style

"app-plus": {
	"softinputNavBar": "none"
}

如需使用js动态设置softinputNavBar

this.$scope.$getAppWebview().setStyle({
	softinputNavBar: 'none'
})
//this.$scope.$getAppWebview()相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效

参考：uni-app官网

uniapp - 移动端H5网页点击输入框弹出软键盘后，收起后页面无法复原，页面没能恢复原状+遮盖遮挡+布局出现上移或下移整体未复原到打开软键盘之前（解决弹出键盘导致页面布局错乱，安卓+苹果ios）
王二红
04-08 5885
uniapp，微信公众号网页，h5移动端开发，uniapp h5平台输入框弹起软键盘，收起后导致页面无法复原的问题，uniApp输入框弹起软键盘，收起后导致页面无法复原的问题，uniapp移动端的软键盘对页面css布局影响的解决办法-底部样式被顶起，弹起键盘遮盖输入框键盘弹起后不恢复，键盘不收回，input输入时软键盘弹起不能自动收回，UNI-APP页面中input输入框弹起软键盘，收起后会导致页面被顶起，无法复原，H5移动端键盘收起后页面上移不复位，软键盘弹出，布局没有上移，弹出软键盘的时候页面顶起不恢复
IOS下软键盘弹出时，H5页面上方的固定区域被顶上去的解决办法(js)
soband_xiang的专栏
03-26 5004
键盘弹出后，整个页面上移，原先固定在顶部，position=fixed的div，不见了。原来这时候div的fixed的效果变成了absolute效果。键盘弹出时，会触发body的scroll事件。这时候只要得到页面整体滚动的距离，把div的top设置为这个距离就可以了 $(window).on('scroll', function () { //在IOS下document.body.scrollT...
iphone 软键盘弹起，禁止页面整体往上滚动
weixin_34163553的博客
12-03 1万+
最近在做一个移动端的项目，底部的输入框获得焦点时，软键盘弹起，在IOS手机上火把页面整个卷走，只看到页面的下半部分。 首先经过反复调试，找到两条重要线索： 1、先找到键盘弹起时页面中会改变的值： 测试软键盘弹起时的正文全文高度、可见区域高度、文档显示高度 、被卷去的高度這几个值是否的改变（iphone 5真机测试 320*568）。 ...
ios 软键盘弹出, 页面整体上移问题
qq_45764710的博客
05-13 3447
问题描述 对于 ios 系统，输入框输入内容，软键盘弹出，页面内容整体上移，但是软键盘收起，页面内容不会自动回到原本的位置，必须手动下拉才会恢复 解决办法 handleBlur(){ let u = navigator.userAgent; let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); if (isIOS) { setTimeout(() => { window.scroll(0, 0) },
解决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-
解决uni-app微信小程序底部输入框，键盘弹起时页面整体上移问题
Qianmoer的博客
07-04 4584
存在问题 做了一个记录页面（类似单方聊天页），输入框在底部；当弹出键盘时，页面整体上移，页面头信息会消失不见 需要实现效果： 比如一个记录页面，需要在键盘弹出时： 底部的输入框跟随键盘上弹 页面头固定在顶部不动 聊天信息区域（即内容区）调整高度，该区域局部滚动 解决方法 底部输入框fixed定位在底部，使用输入框的@focus获取键盘高度，更改输入框bottom；@blur 时恢复 bottom=0； 使用包含页面头和内容区 container的padding-bottom设置为输入框高度+输入框
解决uni-app 底部输入框，键盘弹起时页面整体上移 问题
Boo_crob的博客
08-13 1万+
我在聊天系统和评论区域都遇到过 软键盘把页面顶上去的问题，做聊天系统的时候废了牛鼻子劲才解决页面上移问题，这次做评论功能的时候又遇到了，我觉得以前的方法太麻烦了，想找一个简单的方法，仔细翻读uniapp文档的时候发现了一个属性adjust-position ：Boolean类型，作用是键盘弹起时，是否自动上推页面 来源，uniapp官方文档 发现将adjust-position属性设置为false。就可以了。前提是vue 页面 softinputMode不能是为 adjustResize 这个softin
uniapp 使用input软键盘弹出时将input框内容上移的问题
weixin_44639993的博客
01-16 2531
由于input框默认开启软键盘上顶功能，但是页面又固定了高度，导致input上顶了页面没上顶。
Vue2 - 移动端H5网页点击输入框弹出软键盘后，收起后页面无法复原的问题，页面没能恢复原状+遮盖遮挡+布局出现上移或下移整体未复原到打开软键盘之前（解决弹出键盘导致页面布局错乱，安卓+苹果ios）
最新发布
王二红
04-07 4971
vue，移动端网页，输入框弹起软键盘，布局没有上移，弹出软键盘的时候页面顶起不恢复，实现移动端自动弹起软键盘，软键盘挡住输入框的解决方案，移动端技术问题 — H5页面底部弹出页input输入时整个弹出页被输入法顶起的解决方法，vue h5页面软键盘遮挡等，软键盘顶起页面，H5，input输入时，软键盘弹起不能自动收回，移动端软键盘监听弹出收起及影响定位布局，H5-input弹起键盘遮盖输入框，收起后导致页面无法复原的问题，输入框弹起软键盘，收起后导致页面无法复原的问题，移动端的软键盘对页面css布局影响的解
iOS项目开发键盘弹出遮挡输入框问题解决方案
01-05
UITextField和UITextView，前者是单行输入文本框，后者是可滑动的多行输入文本框，在这整个开发过程中，我们需要控制键盘的弹出和收起、在输入结束的时候获取输入的信息，此外，我们还需要保证在键盘弹起的时候不...
解决vue js IOS H5focus无法自动弹出键盘的问题
10-18
通过上述方法，开发者可以解决iOS上的H5页面中input元素聚焦时键盘不自动弹出的问题，从而提升用户体验。需要注意的是，这样的解决方案是通过诱导用户点击一个显眼的按钮来实现的，它满足了iOS平台的交互逻辑。在...
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
12-11
前言：微信H5项目，ios端出现了软键盘输完隐藏后页面不会回弹，下方会有一大块留白 最近微信和ios都有版本升级，不知道是哪边升级造成的，但是经过测试，软键盘收起后，再滚动一下页面，下面的留白就会消失。所以...
解决uni-app微信小程序底部input输入框，键盘弹起时页面整体上移问题
梅花寺
02-07 6713
由于获取的系统的尺寸单位都是 px ，给 bottom 设置的值单位也一定要是 px!不能因为是手机端就用 rpx，2倍的 rpx 也不可以，因为并不是每个手机分辨率都是我们设计图上375的2倍，一定要用 px 啊！最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
解决uniapp键盘弹起后顶部的导航栏往上顶的问题
weixin_45600052的博客
12-21 4242
第三步：添加固定定位后，会导致该元素脱标，下面的元素往上顶。在顶部导航栏dom元素的同级 再添加一个dom元素 添加的dom元素的高和顶部导航栏的高保持一致即可。, //手机软键盘升起不让其将页面头部上推 如果所有页面都有键盘弹起的功能，可直接在 appPlus中配置，如果不是，直接在哪个页面需要配置哪个即可（建议），在appPlus中配置 "softinputMode": "adjustResize"后，有的页面没有键盘弹起的功能，会导致该页面不能滚动。uniapp中获取dom元素的方法。
解决uni-app微信小程序底部输入框，键盘弹起时页面整体上移 问题
小羊的博客
10-12 9995
解决uni-app微信小程序底部输入框，键盘弹起时页面整体上移 问题 转发自https://www.cnblogs.com/XHappyness/p/13528236.html#4703250 存在问题 做了一个记录页面（类似单方聊天页），输入框在底部；当弹出键盘时，页面整体上移，页面头信息会消失不见 需要实现效果： 比如一个记录页面，需要在键盘弹出时： 底部的输入框跟随键盘上弹 页面头固定在顶部不动 聊天信息区域（即内容区）调整高度，该区域局部滚动 解决方法 底部输入框fixed定位在底部，使用输
uniapp小程序让页面滚动到底部_uniapp输入框失去了焦点时页面自动滚动到顶部
weixin_35531726的博客
01-16 1459
div 固定在顶部 高度60px position: fixed; top: 0; z-index: 999;页面内容div div里面有input框 ，这个input在电脑和手机上看都不会被键盘挡住的–也会把页面跳到最顶部。div 页面底部 固定在底部电脑端：当点击input框，电脑端正常，失去焦点，页面滚动到最顶端。忽略了我顶部有一个60px的固定div，而且也不应该让页面滚动才对。。手机端：...
uni-app H5键盘弹出整体页面上移
weixin_36756837的博客
12-04 5608
将屏幕高度视为视口高度 uni-app开发手机端输入框调出键盘，键盘弹出将页面整个顶上去 原因分析： 移动端h5页面在软键盘弹出 后，body的高度被压缩了，动态绑定body的高度即可解决，就导致原本高度100%的背景图被顶上去一截 解决方案： this.screenHeight = uni.getSystemInfoSync().windowHeight + 'px'; // 把页面高度定成视口高度 ...
解决uniapp软键盘弹起导致页面fixed定位元素被顶上去
tt1234561009的博客
05-09 3537
在移动端开发中通常导航栏需要固定在页面的最顶端，但当页面中有输入框且dom元素较多时，点击输入框弹出软键盘会促使导航栏往上移正常情况如图一所示，软键盘弹起如图二所示图一图二。
uniapp中开发app input设置focus属性不弹出软键盘
03-29
### 软键盘未弹出的原因分析 在 UniApp 中，`input` 组件的 `focus` 属性用于控制输入框是否自动获得焦点。然而，在某些情况下（尤其是 iOS 平台），即使设置了 `focus=true`，软键盘可能不会自动弹出。这通常是因为系统层面对于焦点切换和软键盘行为存在一定的延迟或冲突。 --- ### 解决方案一：手动触发 focus 方法 可以通过编程方式调用 `input` 的 `focus()` 方法来强制使输入框获取焦点并弹出软键盘。以下是实现代码： ```javascript <template> <view> <input ref="myInput" type="text" @click="handleClick" /> <button @click="manualFocus">手动聚焦</button> </view> </template> <script> export default { methods: { manualFocus() { this.$nextTick(() => { // 确保 DOM 已更新后再操作 this.$refs.myInput.focus(); // 手动触发展开软键盘 }); }, handleClick() { console.log('点击事件'); } } }; </script> ``` 此方法通过 `$refs` 获取到目标 `input` 元素，并在其上显式调用 `.focus()` 方法[^1]。 --- ### 解决方案二：延时处理焦点切换 有时由于页面渲染或其他逻辑干扰，可能导致软键盘无法及时响应。此时可尝试引入短时间的延时机制，确保焦点切换完成后才执行后续动作。 ```javascript methods: { delayedFocus() { setTimeout(() => { this.$refs.myInput.focus(); }, 200); // 延迟 200ms 后再触发 focus() } } ``` 上述代码利用了 JavaScript 的 `setTimeout` 函数，给浏览器留出了足够的缓冲时间以完成必要的状态同步[^2]。 --- ### 解决方案三：全局混入防止闪烁 如果项目中频繁遇到类似的软键盘问题，可以考虑采用全局混入的方式统一管理焦点行为。具体做法如下所示： #### 创建全局 mixin 文件 (`foucs.js`) ```javascript // foucs.js export default { mounted() { const inputs = document.querySelectorAll('input'); // 查找所有 input 元素 Array.from(inputs).forEach(input => { input.addEventListener('focus', () => { input.setSelectionRange(9999, 9999); // 防止光标位置异常 }); }); } }; ``` #### 注册至 main.js ```javascript import Vue from 'vue'; import foucs from './foucs.js'; Vue.mixin(foucs); ``` 这样做的好处是可以减少重复编码量，同时提升代码复用性和维护效率[^3]。 --- ### 特殊注意事项 (iOS 设备) 针对 iOS 平台上特有的软键盘表现差异，还需要额外注意以下几点： - **软键盘上方工具栏隐藏**：可通过设置 `softinputNavBar='none'` 来移除默认显示的操作按钮条。 - **动态调整视图高度**：当软键盘弹起时可能会遮挡部分界面内容，需监听窗口尺寸变化事件并对布局作出相应适配。 ---
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

令人作呕的溏心蛋

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

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

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

打赏作者

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

抵扣说明：

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

余额充值