input 输入框被软键盘遮挡问题

1.安卓手机

在软键盘被弹起来的时候输入框不被遮挡,支持性良好javascript

2.ios手机

在软键盘被弹起来的时候输入框被遮挡,体验很很差java

 

在通过屡次实验发现,ios手机输入框被弹起的瞬间是不被遮挡的,过了一会就会往下掉落,正好让软键盘遮挡住输入框,本人推测输入框往下掉落是由于输入框获取焦点的时候页头上面的警告提示弹框所致。ios

 

在有些ios手机上,输入框每次都往下掉落被软键盘挡住,在有些ios手机上,输入框只有在第一次获取焦点的时候往下掉落,之后就不会。浏览器

我尝试用scrollIntoView(),并无解决个人问题,因为我以前的猜想是警告弹框的问题致使输入框下落,我就猜测,若是我时时纠正弹框的位置,让document.body.scrollTop = document.body.scrollHeight;这样会不会就会好不少,我用定时器实时监听,代码以下测试

var interval;
var scrolltopBefor=document.body.scrollTop;//获取调用软键盘以前浏览器滚动的高度
$(".input-text").focus(function(){
	interval = setInterval(function(){
	      document.body.scrollTop = document.body.scrollHeight;//让浏览器滚动到最底部
	//	  focusNumber++;
	//	  if(focusNumber>=5){
	//	       clearInterval(interval);//清除计时器
	//	   }
    },100)
}).blur(function(){//设定输入框失去焦点时的事件
    setTimeout(function(){
		 clearInterval(interval);//清除计时器
		 document.body.scrollTop = scrolltopBefor;//恢复到调用软键盘以前浏览器的高度
    },500);
 });

我原本想当监听十几回以后清除定时器,后来试验不行仍是会掉下去,因此只有在失去焦点的时候监听清除定时器spa

后来测试发现,兼容了大部分ios手机,还有一小部分手机在输入法为九宫格的时候输入框没办法失去焦点事件,评论就发表不出去,最后只能放弃了那一小部分手机进行实时监听的解决方案。code

相关文章
相关标签/搜索