用H5实现类似微信的聊天界面在输入框出现了一些问题。

Question

1.聊天的输入框应该是在最底下，可是当手机键盘出现的时候，键盘就把输入框遮挡了。尤其是第三方输入法的时候更严重，这个问题改如何解决？
2.输入框 position:fixed/absolute bottom:0;

Answer 1

我是这样解决的。当focus的时候做一个500毫秒左右的setTimeout.里面的函数可以写$(window).scrollTop(500)。这里的500是整个页面的高度，你可以根据实际情况即时获取，可以到页面底部就行。

Answer 2

这个是常见的fixed定位bug，解决办法就是不用fixed定位，或者input focus的时候，用js调整输入框的定位

Answer 3

需要将fixed改为absolute，然后父元素relative，根据js动态获取输入框的位置

Answer 4

试试Element.scrollIntoViewIfNeeded()？

Answer 5

用flex来搞