美文网首页
移动端键盘弹起引起的fixed定位问题

移动端键盘弹起引起的fixed定位问题

作者: 嗯这是网名 | 来源:发表于2017-09-27 12:38 被阅读0次

1.问题一:当某输入框获取焦点时,弹起自定义时间插件,貌似很简单一个功能,但测试时问题来了,获取焦点时键盘也会跟着一起弹出来,如下图:

键盘也跟着弹出

,那么到这里你可能会有种给input标签增加 readonly 属性的想法,那么我们来试试效果如何,提供ios和Android的两个截图:


Android增加readonly属性后的表现

恩,Android看着没什么问题了,那我们来看看iOS

ios增加readonly属性后的表现

看着好像也没什么问题,但是仔细看屏幕下方,用户还是可以操作键盘,what?我只是想隐藏个键盘啊,so bad。静下新来仔细想想此过程发生了什么,当我们点击input的时候,触发focus事件,移动端focus事件会触发键盘弹起,那么,在focus事件触发时我们可不可以手动让它触发blur事件呢,答案肯定是可以的,那么我们来试试:

触发focus时手动blur 再看看ios效果

至此,完美解决。
2.问题二:填写订单页面有很多的input框供用户输入信息,当键盘弹起时,底部"提交订单"一栏使用的是fixed定位,会被键盘顶起,如下图:

底部被顶起

这里的解决方案是当focus被触发时键盘会弹出,这时候页面就会发生scroll滚动,我们只需监听resize的变化,然后对应的变化时将底部隐藏,无变化时再显示,代码如下:

代码

让我们来看看效果:

效果

相关文章

网友评论

      本文标题:移动端键盘弹起引起的fixed定位问题

      本文链接:https://www.haomeiwen.com/subject/trzyextx.html