H5-input弹起键盘遮盖输入框(Android)、键盘弹起后不恢复(IOS)

最新推荐文章于 2025-04-07 16:50:18 发布

zhangXY_

最新推荐文章于 2025-04-07 16:50:18 发布

阅读量4.1k

点赞数 1

分类专栏： H5 文章标签： android input输入框被弹起的软键盘遮盖 IOS 弹起的软键盘回退问题布局变化 H5表单input聚焦

本文链接：https://blog.csdn.net/weixin_43549408/article/details/84986323

版权

H5 专栏收录该内容

2 篇文章

订阅专栏

本文解决了在H5页面开发中遇到的Android设备软键盘遮挡输入框及iOS设备下拉框无法正常弹回的问题，通过监听窗口resize事件并在input元素聚焦时调用scrollIntoViewIfNeeded方法实现。

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

安卓机问题：
页面完成之后发现在Android上软键盘的弹起并不会像IOS一样带动页面的弹起，而是在原有位置遮盖了输入框，表现如下(有光标的input在弹起键盘时被遮住)：
在这里插入图片描述
iOS机问题
在input聚焦时可正常弹起，但选择下拉框时却不能正常弹回。

解决：亲自试验可以解决。
用js的resize()方法对浏览器窗口调整大小进行计数：览器窗口的大小时，发生 resize 事件。就可以解决。

window.addEventListener('resize', () => {        
	if (document.activeElement.tagName == 'INPUT') {                      
	window.setTimeout(() => {                											document.activeElement.scrollIntoViewIfNeeded();            
	}, 100);        
}