Uniapp开发h5页面输入框软键盘被顶起

最新推荐文章于 2023-12-04 11:13:17 发布
原创 最新推荐文章于 2023-12-04 11:13:17 发布 · 4.2k 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了解决uniapp中input组件导致页面被软键盘顶起的问题的方法。通过给input添加特定样式及在pages配置文件中设置softinputMode为adjustResize来实现。

问题:当使用uniapp的input时，真机上软键盘将页面顶起的解决方案:
第一步：给input添加class=“uni-input” cursor-spacing=“10”(uniapp文档也有说明)
第二步:pages配置文件对应的页面模块添加**“softinputMode”: “adjustResize”**(uniapp文档也有说明)

"style": {
   
   
				"app-plus": {
   
   
					"titleNView": false,
                    "softinputMode": "adjustResize"
				},
				"enablePullDownRefresh"
最低0.47元/天 解锁文章
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 - 移动端H5网页点击输入框弹出软键盘后，收起后页面无法复原，页面没能恢复原状+遮盖遮挡+布局出现上移或下移整体未复原到打开软键盘之前（解决弹出键盘导致页面布局错乱，安卓+苹果ios）
🏆 前端领域优质创作者
04-08 6431
uniapp，微信公众号网页，h5移动端开发，uniapp h5平台输入框弹起软键盘，收起后导致页面无法复原的问题，uniApp输入框弹起软键盘，收起后导致页面无法复原的问题，uniapp移动端的软键盘对页面css布局影响的解决办法-底部样式被顶起，弹起键盘遮盖输入框键盘弹起后不恢复，键盘不收回，input输入时软键盘弹起不能自动收回，UNI-APP页面中input输入框弹起软键盘，收起后会导致页面被顶起，无法复原，H5移动端键盘收起后页面上移不复位，软键盘弹出，布局没有上移，弹出软键盘的时候页面顶起不恢复
【uniapp】H5之解决底部fixed后被软键盘推起
Minions_Fatman的博客
06-02 1652
【代码】【uniapp】H5之解决底部fixed后被软键盘推起。
解决uniapp H5端 监听键盘的弹出，收起 执行其他操作
lijinjian168的博客
12-01 4107
【代码】解决uniapp H5端 监听键盘的弹出，收起 执行其他操作。
uniapp调用手机系统软键盘，页面窗口被顶起，布局定位失效
qq_43467284的博客
04-17 3439
解决uniapp调用系统软键盘，页面被顶起来的问题
uniapp h5中输入框输入时，会将内容顶上去的解决方案
maohangfei.cn
05-05 8161
h5中输入框输入时会导致键盘将页面顶上去，本文章写了完整的解决方案，以及思路提供参考 （监听键盘的打开和关闭事件）
uni-app H5键盘弹出整体页面上移
weixin_36756837的博客
12-04 5736
将屏幕高度视为视口高度 uni-app开发手机端输入框调出键盘，键盘弹出将页面整个顶上去 原因分析： 移动端h5页面在软键盘弹出 后，body的高度被压缩了，动态绑定body的高度即可解决，就导致原本高度100%的背景图被顶上去一截 解决方案： this.screenHeight = uni.getSystemInfoSync().windowHeight + 'px'; // 把页面高度定成视口高度 ...
解决Android软键盘弹出覆盖h5页面输入框问题
08-27
解决Android软键盘弹出覆盖h5页面输入框问题 知识点一：Android软键盘弹出机理 Android软键盘弹出是Android系统中的一种输入方式，当用户触发输入框焦点时，软键盘会弹出以便用户输入内容。在h5页面中，软键盘弹出...
解决uniapp在App环境下输入框被软键盘遮挡的问题
qq_41120857的博客
12-04 4778
adjustResize：软键盘弹出时，webview窗体高度挤压。屏幕高度=webview窗体高度+软键盘高度。adjustPan：软键盘弹出时，webview窗体高度不变，但窗体上推，以保证输入框不被软键盘盖住。缺点：软键盘在弹出时会因为webview的重绘，导致软键盘所处区域在未显示完全时显示黑底。以下为官方对keyboardheightchange事件的解释。在页面的pages.json中的style中做以下修改。keyboardheightchange 方法。在代码中添加如下处理。
android 全屏 webview 加载的h5的输入框，被键盘遮挡的解决
Alone的博客
03-15 950
安卓加载h5 ，h5界面有输入框 ，安卓键盘会被遮住 。 我是在全屏的状态下这样设置有效(亲测) class CustomLinearLayout: LinearLayout { constructor(context: Context?): super(context) { } constructor(context: Context?, attrs: AttributeSet?): super(context, attrs) { } constru..
监听软键盘的弹出与收起
04-24
近乎完美的监听软键盘的弹出与收起的
解决uni-app微信小程序底部input输入框，键盘弹起时页面整体上移问题
Xu0401的博客
11-16 9027
解决uni-app微信小程序底部input输入框，键盘弹起时页面整体上移问题 解决思路：1.设置使键盘弹起使页面不上移；2.设置输入框所在盒子为绝对定位；3.键盘弹起时获取键盘高度；4.设置输入框所在盒子的bottom的键盘高度；5.清除输入框固定定位导致的浮动（在输入框盒子的上面盒子下方设置padding-bottom【高度与输入框相同】；或者在输入框所在盒子上面加一个块级元素【高度与输入框相同】）
uni-app加载webview的软键盘覆盖到输入框input
u011590754的博客
04-12 1488
app端加载webview键盘弹出时，屏幕高度发生改变，android 在键盘弹出时会触发 onWindowResize, iOS 键盘弹出时窗口不变，所以不触发。 onLoad() { var height = 0; //定义动态的高度变量，如高度为定值，可以直接写 uni.getSystemInfo({ success: (sysinfo) => { height = sysinfo.windowHeight; //自行修改 }, complete:
解决uni-app软键盘弹起以后遮住底部input框问题
w161513820的博客
01-26 3379
解决方法：:adjust-position=“true” 设置为true就好了 <input class="solid-bottom" :adjust-position="true" :focus="false" maxlength="300" cursor-spacing="10" @focus="InputFocus" @blur="InputBlur"></input>
uniapp的input或者textarea再苹果机上面输入框被顶到上面，不在对应位置方法
m0_64207574的博客
11-22 1468
uniapp的input或者textarea再苹果机上面输入框被顶到上面，不在对应位置方法
uni-app 完美解决软键盘把fixed顶起问题
月落星河
04-25 8284
对比图 用了固定定位在H5上出现了键盘顶起的问题， “softinputMode”: “adjustResize” 然后我见网上有让加这个的，但是我加上了有没用，这个可能是作用在app上的，下面来看解决方案。 代码部分 1、 在onload中加个获取当前高低 onLoad() { this.height = uni.getSystemInfoSync().windowHeight }, 2、给你最外层的父盒子加个高度 :style="{height:height + 'px'}" 3
uniapp让ios软键盘-点击-非输入框地方-自动收起
weixin_38304202的博客
12-05 3249
在pages.json里要使用这个特性的页面上style配置: "style" : { "app-plus": { "softinputNavBar": "none" } } 如果需要js动态设置的话： this.$mp.page.$getAppWebview().setStyle({ ...
解决移动端H5页面点击输入框弹出键盘时将底部导航栏挤至上面
zhazhashuai1999的博客
08-12 3467
1.将导航栏position改为static或者relative position: relative | static; 2.如果不方便设置导航栏定位方式,可以监听浏览器输入框聚焦事件. 点击输入框 --> 触发浏览器focusin事件 --> 隐藏底部导航栏 ( --> 弹出键盘) --> 输入完成 --> 触发浏览器focusout事件 (--> 收起键盘) --> 重新渲染导航栏 document.body.addEventListene...
uni-app底部输入框被软键盘部分挡住的解决方案
weixin_41891519的博客
02-24 9434
前提 要引入uni.css 解决方案 在输入框加上class=“uni-input” 和cursor-spacing=“0”（一定要两个一起加上，不然还是会挡住部分的） <input class="uni-input" cursor-spacing="0"/> cursor-spacing 指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spac...
uniapp h5 禁止软键盘顶起页面
最新发布
08-16
在 UniApp 的 H5 页面中，当软键盘弹出时，页面内容可能会被顶起，尤其在 iOS 系统中更为明显，这会影响用户体验。为了防止这种现象，可以通过以下几种方式实现“软键盘弹出时不顶起页面”的效果。 ### 1. 利用 `@blur` 事件恢复页面滚动位置 可以借助 `uni.pageScrollTo` 方法，在输入框失去焦点时将页面滚动回顶部，从而避免页面因软键盘弹出而上移。例如： ```html <template> <view> <input name="name" type="text" @blur="handleTop" placeholder="请输入账号" /> </view> </template> <script> export default { methods: { handleTop() { uni.pageScrollTo({ scrollTop: 0, duration: 0 }); } } }; </script> ``` 该方法在输入框失去焦点时立即将页面滚动位置重置为顶部，从而消除软键盘弹出对页面布局的影响[^1]。 --- ### 2. 使用 `position: fixed` 避免布局重排 对于固定定位的元素（如底部操作栏），iOS 在软键盘弹出时可能会导致 `position: fixed` 失效。为了解决这个问题，可以结合 JavaScript 动态调整元素位置，或使用 `transform` 属性进行定位，避免受软键盘影响。 ```html <template> <view class="bottom-bar" :style="{ transform: 'translateY(' + translateY + 'px)' }"> <!-- 底部内容 --> </view> </template> <script> export default { data() { return { translateY: 0 }; }, methods: { adjustPosition() { // 判断是否为 iOS 设备 const isIOS = /iPhone|iPad|iPod/i.test(navigator.userAgent); if (isIOS) { // 软键盘弹出时向下移动底部栏 this.translateY = -200; // 根据键盘高度调整 } }, resetPosition() { this.translateY = 0; } } }; </script> <style> .bottom-bar { position: fixed; bottom: 0; left: 0; right: 0; height: 60px; transition: transform 0.3s ease; } </style> ``` 通过动态调整 `translateY` 值，可以在软键盘弹出时将底部固定元素“拉下来”，避免其被软键盘遮挡[^2]。 --- ### 3. 监听软键盘事件并动态调整布局 在 UniApp 中，可以监听 `@focus` 和 `@blur` 事件来获取软键盘弹出和收起的状态，并据此调整页面布局。例如： ```html <template> <view> <input name="name" type="text" @focus="onInputFocus" @blur="onInputBlur" placeholder="请输入账号" /> </view> </template> <script> export default { data() { return { keyboardHeight: 0 }; }, methods: { onInputFocus(e) { // 获取软键盘高度（部分平台支持） if (e.detail && e.detail.height) { this.keyboardHeight = e.detail.height; // 调整页面样式 uni.pageScrollTo({ scrollTop: 0, duration: 0 }); } }, onInputBlur() { // 恢复页面布局 this.keyboardHeight = 0; } } }; </script> ``` 通过监听输入框的 `@focus` 和 `@blur` 事件，可以在软键盘弹出时获取其高度并据此调整页面布局，从而避免页面被顶起[^3]。 --- ### 4. 使用 CSS `position: absolute` 替代 `fixed` 在某些情况下，`position: fixed` 在 iOS 中的行为不稳定。可以尝试使用 `position: absolute` 并结合 `transform` 或 `bottom` 属性来实现类似效果，减少软键盘对布局的影响。 ```css .bottom-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 60px; } ``` --- ### 总结 通过以上方法，可以在 UniApp 的 H5 页面中有效防止软键盘弹出时页面上移的问题。建议根据实际需求选择合适的方式，例如结合 `@blur` 事件恢复滚动位置、使用 `transform` 动态调整元素位置，或改用 `position: absolute` 来规避 `fixed` 定位的不稳定性。 ---
评论 5
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值