西门的后花园

一个热爱网络的年轻人的博客

解决iOS里fixed中有input文本框bug

移动端里对悬浮效果支持不是很好。例如PC端里很常见的页面滚动到一定距离,导航悬浮效果,页面scroll的时候计算滚动条和顶部距离,加fixed就可以了。但移动端里,基本上所有手机,页面滚动的时候,任何js都不会执行。所以手机里这个效果,得等到页面停止滚动,导航才会悬浮。

fixed悬浮又有个大忌,就是iOS里fixed中有input或者textarea,用户在里面输入文字,触发键盘,fixed容器会居中显示,而不是继续悬浮,如下图:

如果你有iPhone,可以用微信扫一扫下面二维码看这个页面的效果。一定要把网页往下滑动,让导航悬浮,再点文本框才会出现。

demo链接

所以很多文章里都会说,不要在fixed里用input或者textarea。但这种需求总是会有,无法逃避。碰巧今天运气好,投机取巧的解决了这个问题,如果有跟我差不多需求的同学,可以尝试一下这个方法。

前提:需要加fastclick这个js库,作用是为了去掉移动端上点击页面300毫秒延迟。

继续用iPhone扫二维码吧:

demo链接

原理很简单,你看到的文本框,其实是一个标签模拟的,实际悬浮文本框一开始被隐藏起来了。当点击模拟文本框时,锁住整个页面的同时,隐藏模拟文本框,显示实际悬浮文本框。

具体是为什么,我不知道。要问iOS为什么这样设计,我也不知道。

现存问题:Android设备UC浏览器弹不出来键盘。

评论列表

  1. ios总是很蛋疼。。

  2. 滚动时不加载 JS 是移动端的通病吧…

  3. 先赞 一个!! 😛

  4. 哈哈 都开始移动端开发了 🙄

  5. 还在用安卓的穷屌路过。

  6. 延迟那个用touch事件好了,不要用click

  7. 我觉得还是有个BUG,第二个DEMO 页面滑到最下面然后文本输入完毕后整个页面有重新回到页面顶部。

  8. 做移动端页面的时候,也是需要这个问题

  9. lp

    网上还有个方法 说是通过文本框获得焦点的时候改变定位样式 为static 或者relative这种占空间的,等失去焦点的 时候在回到fixed设置

发表评论

分类目录