ios12关于input框的相关问题

写在前面

我觉得十年前的前端大多是注重内容，现在的前端都是注重用户体验，视觉享受的。所以优化用户体验、适配机型，适配系统等就相当重要了。下面来说一下关于ios12系统给input框带来的改（ju）变（keng）。主要是针对移动端一版式应用（页面不存在上下滑动，一版展示完全）

抛出问题

不知道系统开发者出于什么考虑，ios12之后input框失去焦点之后，键盘隐藏之后页面就不会回弹到原来的位置了。甚至是页面回去了，但是页面可触发事件的位置没有回去。这就造成点击按钮不能触发事件等等相当差的用户体验。

解决思路

考虑到页面在键盘隐藏之后没有自动回弹回去，所以思路就是用代码用他失去焦点的时候自动滚回去（你给我滚）。

源码

//ios端自动回弹页面
$("input").blur(function(){
	$('html,body').animate({scrollTop:0}, 0);
}

新的问题

上面的方法完美解决的页面只有单个input框的回弹问题，但是问题又来了。如果页面上面有多个input输入框的时候。例如提交中奖资料的时候姓名、电话、地址等等输入框。我们执行了上面的代码之后，当输入完第一个input切换到第二个焦点input的时候，就触发了失去焦点的方法，页面就自动回弹回去top=0的位置了（在输入第二个input的时候，键盘出来，页面本应该被顶上去）。

多行文本最终方案

//苹果回弹背景
var boo=true;
$("input").focus(function(){
	boo=false;
	setTimeout(function(){
	boo=true;	
	},20)
})
$("input").blur(function(){
   setTimeout(function(){
   	if(boo){
   	$('html,body').animate({scrollTop:0}, 0);
   	}
   },10)	
});

完美end~