移动端调起软键盘遮盖input

最新推荐文章于 2024-03-07 15:02:34 发布

原创最新推荐文章于 2024-03-07 15:02:34 发布 · 360 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#移动端

javascript+jquery 同时被 2 个专栏收录

46 篇文章

订阅专栏

android+ios+webapp+hybrid

5 篇文章

订阅专栏

本文介绍了一个用于使元素在页面中滚动到可视区域的JavaScript函数，并详细解释了scrollIntoView()方法的使用，包括如何根据需要调整元素与视口的位置关系。此外，还探讨了在不同设备上，特别是Android 4-8版本设备上的特殊处理方法，确保输入框在键盘弹出时仍保持可见。

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

function pushKey() {
	let target = this;
	setTimeout(function() {
		target.scrollIntoViewIfNeeded(true);
	},100);
	if(/Android [4-8]/.test(navigator.appVersion)) {
		window.addEventListener("resize", function() {
			if(document.activeElement.tagName == "INPUT" || document.activeElement.tagName == "TEXTAREA") {
				window.setTimeout(function() {
					document.activeElement.scrollIntoViewIfNeeded();
				},100);
			}
		})
	}
}

scrollIntoView(alignWithTop): 滚动浏览器窗口或容器元素，以便在当前视窗的可见范围看见当前元素。

alignWithTop 若为 true，或者什么都不传，那么窗口滚动之后会让调用元素的顶部与视口顶部尽可能平齐；

alignWithTop 若为 false，调用元素会尽可能全部出现在视口中，可能的话，调用元素的底部会与视口顶部平齐，不过顶部不一定平齐。

支持的浏览器：IE、Chrome、Firefox、Safari和Opera。

该方法是唯一一个所有浏览器都支持的方法，类似还有如下方法，但是只有在Chrome和Safari有效：

scrollIntoViewIfNeeded(alignCenter)

scrollByLines(LineCount)