700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > iOS唤起键盘页面被顶上去且无法自动回退带来的问题及解决方案

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

时间:2019-10-07 10:18:30

相关推荐

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为

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。