javascript - 在ios下输入框被顶起来要怎么处理

Question

自定义的输入框，光标移入的时候在iso下会被顶在中间，有什么处理的办法吗？

巴扎黑 · Answer

同问

这似乎是移动端浏览器都有的 bug: 放一个 absolute bottom的对象在底部，弹出输入框时其会被顶起。

我的方法有些 hack 的味道: 在 resize 事件中监控那个框，若异常则修正。

显然这不太好，求高手支招。

黄舟 · Answer

.message-bar {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2em;
}

以前我是这么定位的，后来发现iOS7上启用中文输入法时，候选字框会挡住最底下一行，在Android里不同浏览器表现不同，微信能顶起来正常显示，UC则会出现滚动条，文本框会在软键盘后面，需要手工再滑下来才出现。

于是我用JS加了一个Hack，在框的onfocus事件中延时200ms把页面自动滚到底部（输入法调出到显示新布局需要一点时间）；如果是iOS7的话，就把bottom改成一个试出来的值（可惜如果用户用的是英文输入法会悲剧，没有候选字框，会多出一段空白）。

最终我并没有找到能兼容所有平台所有浏览器的解决方案。

怪我咯 · Answer

不算解决办法的办法：放弃这种布局

PHPz · Answer

iOS下都有这个bug，我的做法是妥协，尽量避免这样的设计。QQ空间手机版以前的设计也有这样的bug。

PHP中文网 · Answer

我确实也碰到了这样的问题，没有找到比较好的解决办法，其实也只是输入框接近页面底部的时候会出现这个问题。

我目前的方式也是避免这样的设计尽量靠上放置输入框。

实在需要输入框在底部，要客户端写一个这样的API ，在底部显示一个输入框。

天蓬老师 · Answer

原因

软键盘唤起后，页面的fixed元素将失效（即无法浮动，也可以理解为变成了absolute定位），所以当页面超过一屏且滚动时，失效的fixed元素就会跟随滚动了。这是iOS上fixed元素和输入框的bug，其中不仅限于type=text的输入框，凡是软键盘（比如时间日期选择，select选择等）被唤起，都会遇到同样的问题。

解决思路

使用脚本进行各种判断。如果监听键盘唤起，延时改变定位等蒙骗眼睛，不过用户体验不好；
使用isScroll.js。不建议，基于尽量不依赖第三方库以简化实现方式的原则；
使fixed元素的父级不出现滚动。因为fixed元素失效后导致跟随页面一起滚动，那么如果父级不滚动，fixed元素失效也无法跟随页面滚动，也就不会出现上面问题；
使用position:sticky实现iOS6+下的粘性布局。可惜的是在caniuse列表下显示Android自带浏览器全部不支持该属性！

参考

Web移动端Fixed布局的解决方案 - EFE
position: sticky实现iOS6+下的粘性布局 - EFE

javascript - 在ios下输入框被顶起来要怎么处理

全部回复(6)我来回复

原因

解决思路

参考