苹果手机输入框(input,select,textarea)失去焦点后,页面不归位问题

我是一块砖,哪里需要往哪搬!
移动项目开发中经常会遇到奇奇怪怪的问题,在正常不过了。而由于ios和安卓系统的不同,适配问题也是时常发生。
而其实一个,苹果手机输入框(input,select,textarea)失去焦点后,页面不归位的问题是在平常不过了。
问题分析:
由于安卓系统调用键盘的时候是直接浮动在页面上面的,而ios是整体把页面订到了上面,所以当键盘缩回时,ios系统上就会出现页面不会自动恢复原位的问题。
问题呈现:
苹果手机输入框(input,select,textarea)失去焦点后,页面不归位问题_第1张图片

                  *iso上面的状态(页面顶上去)*

苹果手机输入框(input,select,textarea)失去焦点后,页面不归位问题_第2张图片

                 *安卓系统键盘浮在页面之上*

解决方法:
两段简短js,完美结局问题。

//失去焦点
$("input,select").blur(function(){
  var top = $("body").scrollTop();
  $("body").scrollTop(top);
});
//失去焦点
$("input,select,textarea").blur(function(){
  $("body,html").scrollLeft(0);;
});

苹果手机输入框(input,select,textarea)失去焦点后,页面不归位问题_第3张图片

                           *解决后的ios*

由于问题原因是输入框失去焦点后,页面没有互动,没有触发到页面恢复到原位置,所以我们就在失去焦点的时候,给他一个反馈,这样就能完美结局标题所述的问题了。
我是一块砖,如果你需要就去搬

你可能感兴趣的