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

最新推荐文章于 2024-08-07 18:21:52 发布

枫丿慕

最新推荐文章于 2024-08-07 18:21:52 发布

阅读量2.6k

点赞数

分类专栏：前端文章标签：移动端兼容问题弹出框遮挡

本文链接：https://blog.csdn.net/abcde158308/article/details/82800438

版权

前端专栏收录该内容

82 篇文章 1 订阅

订阅专栏

方案1.

Element.scrollIntoView()

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

方案2.

Element.scrollIntoViewIfNeeded()

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

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

方案3. https://blog.csdn.net/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.csdn.net/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();

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