手机端弹窗有input输入框,使用fixed会导致input框失去焦点的问题

原创 oceanliu666 随笔 css 157阅读 2018-01-12 17:39:14 举报

问题描述:
我们在写手机端的wap页面的时候。很多时候都会用到蒙版弹窗,而且有时候,弹窗里面会有需要我们输入一些相关信息的input'框,例如弹窗的注册登录页等,但是,当IOS发布了IOS11版本的系统后,我们发现本身就不是很兼容的fixed属性,一下子更加的让人难以忍受了,当你点击input框想输入一些东西的时候,会发现,你压根不知道你点击的是哪个input框,因为他没有光标,即使有也会到处乱排,所以在测试GG们不断的提bug下,找到一个不是解决办法的解决办法,仅供大家参考,同时也欢迎大家一起讨论此问题。

html 代码

原理:对最外面的大盒子div的宽度高度进行限定,使其处于一屏大小,然后让其里面的内容可以滚动。这样我们的body大小就是只有一屏的,此时我们在与最大的盒子平级的元素采用position:abolute进行定位的时候,就相当于是对屏幕的位置进行定位,这样的效果就能达到position:fixed的效果,而且input里面的光标也不会到处乱跑了。

评论 ( 2 )
最新评论
oceanliu666 1F 2018-01-15 19:38:48 2F

如果有input框,且页面高度大于一屏的时候,body改成fixed也是不行的,光标还是会到处跑

她让我换网名 2018-01-15 10:34:46 1F

我也遇到了 出现input的时候 body的定位改成fixed 并且宽度100% 关闭的时候body的定位在变成relative