移动端弹出输入框遮挡问题处理方案

最新推荐文章于 2025-05-28 21:34:11 发布

原创最新推荐文章于 2025-05-28 21:34:11 发布 · 2.6k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#移动端兼容问题 #弹出框遮挡

前端专栏收录该内容

82 篇文章

订阅专栏

本文提供了多种解决安卓浏览器软键盘弹出后页面滚动问题的方法，包括使用JavaScript调整body高度和margin，以及监听resize事件来适应软键盘的弹出和收起，确保输入框聚焦时能正确滚动至可视区域。

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

方案1.

Element.scrollIntoView()

滚动到父元上边，经测试有效。

方案2.

Element.scrollIntoViewIfNeeded()

只在当前元素在视窗的可见范围内不可见的情况下，才滚动浏览器窗口或容器元素，最终让当前元素可见。如果当前元素在视窗中已经可见了，那么这个方法将不做任何处理，此方法是对Element.scrolltoView()的进一步补充。

不知为何经测试还是无效。。。。。

方案3. https://blog.youkuaiyun.com/hzaini89/article/details/72864344/

解决方案原理：

安卓浏览器在软键盘弹出后不会像ios浏览器那样重新计算window的高度，所以导致安卓浏览器window的高度在软键盘弹出的时候为“软键盘的高度＋（window的高度－软键盘的高度）”；而其实，此时，合理的高度应该是页面的高度＋软键盘弹出的高度；就此解决方案为如下：

      var winHeight = $(window).height(); //获取当前页面高度
                $(window).resize(function() {
                    var thisHeight = $(this).height();
                    if (winHeight - thisHeight > 50) {
                        //当软键盘弹出，在这里面操作
                        //alert('aaa');
                        $('body').css('height', winHeight + 'px');
                    } else {
                        //alert('bbb');
                        //当软键盘收起，在此处操作
                        $('body').css('height', '100%');
                    }
                });

经过本人测试还是有问题

方案5. https://blog.youkuaiyun.com/q36835109/article/details/71713375/

setTimeout(function(){
	document.body.scrollTop = document.body.scrollHeight;
},300);

这种场景对于我这并不适用

方案6.

<input type="text" jump=true />

function jump_top(){ 
	var u = navigator.userAgent;
	var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
	var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
	if(isAndroid){
		$("body").css("height","0px");
		$("body").css("height",document.body.scrollHeight);
		$('[jump=true]').bind("focus",function(event){
			if($(event.target).attr("type")=="button")return;
			$("body").css("margin-bottom","500px");
			$(window).scrollTop($(event.target).offset().top-100);
			event.preventDefault();
		});
		$("body").bind("click",function(event){
			if($(event.target).attr("type")=="button")return;
			$("body").css("height","0px");
			$("body").css("height",document.body.scrollHeight);
			$("body").css("margin-bottom","0px");
			event.preventDefault();
		}); 
	};
}
jump_top();

完美解决。。。。。。。。。。。。。。