关于移动端ios手机输入框挤压body会让弹出框点击失效的问题

我以前居然没有发现过，真是个失败的前端了。

就一个登录页面，点获取验证码会先弹出图片验证码弹窗，

这个时候点击图片验证码的输入框，键盘就会弹出来把后面的背景挤压上去。

然后点确定或者取消的时候，就会没有反应。如果手动把后面的背景划回来，就正常了。

我查了一下，可以给input绑定onblur事件，也就是这样

但是莫名其妙就是绑定不上。所以我只能在每个input标签上绑定了onblur事件。

事件是绑上了，页面也能回去了，这个时候我又发现了一个问题，

当我输入完手机号点获取验证码，直接执行了onblur事件，页面直接回弹了，而获取验证码的点击事件没有触发。

后来才想起来，click事件在移动端有300ms的延迟，为了判定是不是双击。

所以又加了个定时器。幸好测试没说为什么明显有个回弹的问题。。。

 

但是马上又有了另一个问题，因为有手机号和验证码两个输入框，点验证码输入框的时候相当于触发了手机号输入框的onblur事件，所以body回弹，输入框挡住了两个input。

这个怎么解决呢，我研究了一下，最后决定，去掉onblur事件，改为点击按钮时让body回弹也就是上面方法里的操作，然后监听输入框收起事件，如下图

这样在点第二个输入框的时候就不会出问题了。

不知道测试还会不会测出其他问题，让我们拭目以待。（我觉得不会了，再提我就哭给她看