IOS移动端页面操作过程中发生位移后焦点错位的问题修正

问题描述

之前开发移动端产品时发现过一个很奇怪的问题，移动端的页面在安卓客户端上操作一切正常，而在IOS客户端，如果页面发生了位移（比如召唤出输入法把页面顶上去了一部分），那么在后面出现有弹框（例如提示框，需要点“确认”按钮）的时候，按钮的焦点会发生位移（原按钮位置点击无效，必须得往上或者往下一段距离才能点得到）。此项目使用的是客户端内嵌页面，页面开发使用的是vue。

问题解决

针对页面焦点的位移的问题，最简单的办法就是在操作完成后重置页面的焦点参数。在类似需要召唤出能使页面发生位移的部件时（例如输入法），增加一个失去焦点事件(@blur)，然后在方法中重置页面的位置参数。
例：

<input v-model="Name" placeholder="请输入姓名"  @blur="resetWindowScroll "/>

methods部分：

resetWindowScroll() {
	// 判断是否为IOS
	var ua = navigator.userAgent
	if (ua.toLowerCase().indexOf('applewebkit') !== -1) {
		// 重置页面位置参数
  	 	window.scroll(0, 0)
	}
}

效果就是当你输入完成后，页面会自动重置到最顶端。
此方法有一个缺点，假如你页面已经拉到很下面了，输入完后页面还是会被重置到最顶端，但是在页面不长的时候此方法还是基本适用的。