微信端autofocus虚拟键盘弹出拉高页面

微信端autofocus虚拟键盘弹出拉高页面

可以看到在微信端打开我的收银台页面，点击下一步时，会弹出支付密码弹窗，再点击关闭的时候，整个页面都会向上滑。这显然是不正常的。

首先采用的方法是，input失去焦点或者点击支付密码弹窗左上角X的时候，使用scrollTop定位到页面顶部。

document.documentElement.scrollTop = document.body.scrollTop = 0

可以看到画面更加魔幻了。有一个页面被虚拟键盘向上推起，又被scroll拉下来的动画。

同时，我们也有一个疑问，为什么我们明明只是关闭了支付密码的弹窗，会有虚拟键盘弹出来，拉高页面。看了弹窗的相关代码。

<input type="password" placeholder="请输入支付密码" onChange={this.handleChange.bind(this)}  autoFocus />

从代码中可以看到，input中有autoFocus，可以自动聚焦，并唤起虚拟键盘。

查阅资料可知：IOS下input的获取焦点存在这样的问题

来自FastClick团队的大牛指出了IOS下input的获取焦点存在这样的问题：my colleagues and I found that iOS will only allow focus to be triggered on other elements, from within a function, if the first function in the call stack was triggered by a non-programmatic event. In your case, the call to setTimeout starts a new call stack, and the security mechanism kicks in to prevent you from setting focus on the input.

最后采用的方案是微信中不自动聚焦。判断是否在微信浏览器中navigator.userAgent.toLowerCase().includes('micromessenger')，如果是的话，就将autoFocus设为false。