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

Question

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

Answer 1

同问

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

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

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

Answer 2

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

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

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

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

Answer 3

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

Answer 4

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

Answer 5

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

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

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

Answer 6

原因

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

解决思路

1. 使用脚本进行各种判断。如果监听键盘唤起，延时改变定位等蒙骗眼睛，不过用户体验不好；

2. 使用isScroll.js。不建议，基于尽量不依赖第三方库以简化实现方式的原则；

3. 使fixed元素的父级不出现滚动。因为fixed元素失效后导致跟随页面一起滚动，那么如果父级不滚动，fixed元素失效也无法跟随页面滚动，也就不会出现上面问题；

4. 使用position:sticky实现iOS6+下的粘性布局。可惜的是在caniuse列表下显示Android自带浏览器全部不支持该属性！

参考

• Web移动端Fixed布局的解决方案 - EFE

• position: sticky实现iOS6+下的粘性布局 - EFE