解决移动端输入时候键盘遮挡问题

Posted on Edited on In

安卓手机和苹果手机body或者是外层div高度值不一样。安卓手机body或者是外层高度的高度要重新赋值，安卓手机高度要通过获取window的高度 然后赋值给body或者最外层div 代码如下
还要把body 设为relative

1
2
3
4
5
6
7
8
9
10
11
12
13
$("input,textarea").focus(function(){
			var win_h = $(window).height();  //关键代码
			$("body").height(win_h);  //关键代码

			var head_h  = $("#header").height();
			console.log(head_h)
			var num = $(this).offset().top-head_h;
			$("html,body").animate({scrollTop:num},800);
			$("html,body").css("height","800px")
		}).blur(function(){
			$("html,body").css("height","auto")
		})
		})
1
2
3
4
5
6
7
8
9
if(/Android [4-6]/.test(navigator.appVersion)) {
   window.addEventListener("resize", function() {
     if(document.activeElement.tagName=="INPUT" || document.activeElement.tagName=="TEXTAREA") {
       window.setTimeout(function() {
         document.activeElement.scrollIntoViewIfNeeded();
       },0);
     }
   })
 }