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

最新推荐文章于 2024-06-02 23:34:13 发布

原创最新推荐文章于 2024-06-02 23:34:13 发布 · 5.6w 阅读

6 ·

CC 4.0 BY-SA版权

未经允许，不得转载。

文章标签：

#html5 #移动端 #input #键盘焦点 #input框键盘焦点

H5 专栏收录该内容

7 篇文章

订阅专栏

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

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

	// input 键盘焦点问题修复

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