IOS 键盘弹起无法触发onresize事件

Question

因为设计要求，在webview里面，软键盘弹起要把位于页面最下面的元素顶起来，紧贴软键盘，测试代码如下：

.test-box{
    width: 300px;
    height: 200px;
    background-color: pink;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -150px;
} 

这个是位于页面最下方的div元素，点击input输入框，在安卓手机中正常显示，div被顶起，紧贴软键盘，在IOS中，无论是Safari还是chrome浏览器都不能正常的显示效果。

我之前的想法是，软键盘弹起触发onresize事件，计算当前页面的高度，与之前页面的高度做对比，两者之差即是软键盘的高度，然后再定位div的位置，这样也能达到在安卓手机上的效果，但是我发现在IOS中，上述两个浏览器在键盘弹起后都无法触发onresize事件，而且与安卓手机不同的是，IOS弹起键盘后，可用页面出现滚动条，但在安卓手机中没有这样的效果。

所以，想请问一下知道这个问题的朋友有什么解决方案，谢谢。

Answer 1

很闷解决了没有？求分享

Answer 2

安卓直接fixed就可以了，键盘起来就会顶上去，其他的什么都不用设置，IOS没有resize事件，别折腾了，没用。

Answer 3

我也遇到过这个问题，找了很多资料，要想刚好浮动到紧贴键盘，我感觉ios上，这个问题现阶段H5是没找到方法。只有改变下实现效果了

Answer 4

试试Element.scrollIntoViewIfNeeded()？

Answer 5

$('.test-box')[0].scrollIntoView(true)