ios 键盘弹起内容点击位置错乱点击失效详解及解决办法

【问题表现】：h5网页在iphone手机上打开，点击input/textarea 键盘弹起的时候，再收起键盘，点击按钮没有反应。滑动一下屏幕，效果就恢复了。

【问题原因】：ios旧系统存在的一个bug(本人版本：12.1.4)，键盘弹起收起的过程中，界面看起来没有什么问题，其实内容的实际dom被留在了键盘撑起的位置

【解决方案】：定位到了原因，也知道了滚动屏幕就能恢复，那就好办了,我们可以在input/textarea失去光标的时候让页面执行一下滚动动作

【技术点】：window.scrollTo(xpos,ypos) 把内容滚动到指定的坐标。

　　　　xpos必需。要在窗口文档显示区左上角显示的文档的 x 坐标。

　　　　ypos必需。要在窗口文档显示区左上角显示的文档的 y 坐标。

vue写法: 

<input type="text" @blur="loseInput" />
methods:{
　　loseInput: function(){
　　　　window.scrollTo(0,0)
　　}
}

 

jQuery写法:

<input type="text"  class="myInput"/>

$(".myInput").blur(function() {
    window.scrollTo(0, 0);
});

 

javaScript:

<input type="text"  class="myInput"/>

var myInputObj = document.getElementsByClassName(\'myInput\')
    //得到一个有序的节点列表 NodeList对象，它有索引 循环它
for(var i=0;i<myInputObj.length;i++){
　　myInputObj[i].onblur=function(){
   　　window.scrollTo(0,0);　　　　　　
   }
}

如果只有一个输入框就更方便了，设置一个ID

<input type="text"  id="myInput"/>

var myInputObj = document.getElementById(\'myInput\')
myInputObj.onblur=function(){
    window.scrollTo(0,0);　　　　　　
} 

希望能帮到遇到问题的你，欢迎指正！