关于移动端input框获取焦点后被键盘遮盖问题修复的最佳方案

u014789708

于 2018-09-29 17:19:59 发布

阅读量5.6w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： H5 文章标签： html5 移动端 input 键盘焦点 input框键盘焦点

本文链接：https://blog.youkuaiyun.com/u014789708/article/details/82900316

H5 专栏收录该内容

7 篇文章

订阅专栏

本文解决了input键盘焦点在窗口调整大小时丢失的问题，通过在resize事件中使用setTimeout和scrollIntoView确保输入框保持可见。已完成Android与iOS真机测试。

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

Android真机测试通过 ✔
iOS真机测试通过 ✔

	// input 键盘焦点问题修复

	window.addEventListener('resize', () => {
		const activeElement = document.activeElement
		if (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA') {
			setTimeout(() => {
			  activeElement.scrollIntoView()
			}, 100)
		  }
	})