手机端 键盘弹出 遮住输入框处理

这个问题的处理方式有几种 ,这里我只说明比较实用的一种

$("input").focus(function(){
	$('body').attr('height','9999px') ; 
	this.scrollIntoViewIfNeeded();
}) ;
$("input").blur(function(){
	$('body').attr('height','auto') ;
}) ;

 这里关键在于  scrollIntoViewIfNeeded 方法用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。 如果该元素已经在浏览器窗口的可见区域内,则不会发生滚动。

在使用 UniApp 开发 H5 页面并希望在鸿蒙系统手机上运行时,遇到输入框键盘遮挡问题,可以尝试以下几种解决方案: 1. **设置页面样式**:在需要展示输入框的区域设置适当的CSS高度,如 `padding-bottom` 或 `min-height`,预留出足够的空间用于键盘弹出。 ```css .input-container { padding-bottom: env(safe-area-inset-bottom); /* 或者其他适合的方式 */ min-height: 100vh; } ``` 2. **监听键盘事件**:利用 UniApp 提供的 `uni.getSystemInfo()` 方法获取设备状态信息,然后动态调整页面布局。当检测到键盘打开时,调整输入框容器的位置。 ```javascript uni.addEventListener('keyboardshow', function(e) { document.getElementById('inputContainer').style.bottom = 'auto'; // 其他必要的动画效果 }); uni.addEventListener('keyboardhide', function() { document.getElementById('inputContainer').style.bottom = 'env(safe-area-inset-bottom)'; }); ``` 3. **启用自动高度模式**:在 UniApp 的配置文件 `config.json` 中,将 "autoAdjust" 设置为 "true",让框架自动处理部分UI元素的高度变化。 ```json { "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "首页", "navigationBarTextStyle": "black", "enableAutoAdjust": true, ... }, ... } ``` 4. **检查兼容性模式**:确保你在编写代码时针对鸿蒙系统进行了适配,有些特性可能需要特别处理。检查 UniApp 是否已经更新了对鸿蒙的官方支持。 如果你依然遇到问题,建议查阅UniApp 官方文档或社区论坛,寻求更具体的帮助。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

Huang-ioi

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

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

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

打赏作者

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

抵扣说明:

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

余额充值