APP内嵌H5,input弹出键盘后页面底部空白

h5是uniapp的项目,场景是app项目中内嵌h5页面,IOS手机在点击输入框后,底部键盘弹出,页面整体上移。然后关闭键盘后,页面却无法下移,展示了一片空白。

在考虑解决方案的时候,尝试过以下几种方法:

1、根据uniapp官网的说明,设置页面中键盘的弹出方式。但是ios机并无效果,安卓机正常;

2、监听页面的尺寸变化,在变化时改变页面的高度。但是ios和安卓机并没有触发这个监听事件;

3、根据uniapp官网中input组件声明的键盘监听事件,结果也不会触发打印;

4、设置input的blur事件,在页面初始化的时候获取页面的高度,当收起键盘时,input输入框会触发失焦事件,所以在blur事件中执行 window.scrollTo(x,y) 方法,y是初始化时获取到的页面高度,这样在收起键盘后页面就不会卡住留下一个大空白了。这个目前测试看起来是没什么问题的,效果整挺好。

H5内嵌APP中,当输入框获取焦点并触发键盘弹出导致页面滚动时,确实可能会出现页面瞬间跳动的情况。这是因为当页面滚动时,浏览器默认会调整其布局。要解决这个问题,可以采取以下策略: 1. **事件监听**: 使用JavaScript监听`window`的`resize``scroll`事件,然后根据滚动高度动态调整输入框的垂直位置。当页面开始滚动时,将输入框的位置移动回正常位置,滚动停止后再恢复原始布局。 ```javascript document.addEventListener('resize', () => { // 计算需要的偏移量 const input = document.getElementById('myInput'); const newTop = calculateNewInputPosition(); if (newTop !== input.offsetTop) { input.style.top = newTop + 'px'; } }); document.addEventListener('scroll', () => { requestAnimationFrame(() => { const input = document.getElementById('myInput'); input.style.top = calculateNewInputPosition() + 'px'; // 防止动画抖动 }); }); function calculateNewInputPosition() { // 根据窗口滚动位置计算输入框的新位置 } ``` 2. **CSS hack**: 使用一些CSS技巧,如`:focus-within`伪类配合position: fixed,可以让输入框始终位于屏幕底部,避免页面滚动。但在某些老版本的浏览器中可能不兼容。 ```css .input-container { position: relative; } .input-field:focus-within { position: fixed; bottom: 0; width: 100%; } ``` 3. **优化滚动性能**: 考虑使用`requestAnimationFrame`或者`Intersection Observer`这类API来更新输入框的位置,这样可以使滚动过程更平滑,减少闪烁。 无论采用哪种方法,记得在滚动结束后(如`window.onscroll`事件的回调中)取消输入框的临时样式,以防止不必要的闪烁。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值