iOS唤起键盘页面被顶上去且无法自动回退带来的问题及解决方案

一、问题描述：

问题1：iOS唤起软键盘，将页面顶出屏外，且无法自动回退到正常位置

详细描述：在开发H5页面时，会遇到这样的问题，在iPhone访问有提交按钮fixed在底部页面，且页面中有input框等可录入信息的元素时，点击input框唤起键盘，输入信息，这时候页面会被顶出屏外，且在点击键盘的完成按钮收起键盘时，页面不会回到原来正常的位置。

问题2：点击fixed在底部的提交按钮无反应

详细描述：遇到问题1时，先是大概分析了一下，然后一顿操作，没想到解决了问题1却带来的新问题；页面虽然可以回到正常位置，但点击fixed在底部的提交按钮无反应，只有滑动一下屏幕才能正常点击键盘高度位置以下的区域。

二、解决方案（代码基于Vue写的，思路可参考）

问题1解决方法：可以将该页面最外层元素position:fixed住，这样唤起键盘、收起键盘就可以回退到正常位置了，但是这样解决就会引起问题2，所以我这里使用另一种方法解决问题1：

1、将页面最外层元素position:absolute住，并将其宽高均设置为100%；

2、使用sticky footer布局将底部提交按钮固定在页面底部；

到这里我已经解决了问题1，代码基本是这样的(这里css我用的是stylus，其实都大同小异)，注意：content-wrapper与btn-wrapper为同级元素。

3、继续解决问题2，监听input框的focus和blur事件，并设置状态isCanScroll ,默认不可滚动。这里的代码我是基于vue写的，具体解决问题的思路可供参考。

4、思路：当页面中只要还有一个input框是focus的状态，那么，isCanScroll状态就为false，即不可滚动，否则，当页面所有input框失去焦点，isCanScroll状态就为true，然后监听isCanScroll状态，当其为true时，使用scrollIntoView()方法，讲最外层元素滚动到页面顶端。

完整代码如下：

最后，我测试了iOS出现这样问题的情况，iOS浏览器中且页面内容未满一屏时会出现这样的情况，支付宝中打开没有这样的情况，应该是支付宝对这类问题进行了处理。