一、问题描述:
问题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为