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);　　　　　　

　　　　}

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