H5软键盘相关问题

H5软键盘在不同终端出现的兼容性问题，堪称连环坑。

1、Android、IOS软键盘弹起、收回表现

由于H5没有直接监听软键盘的原生事件，只能通过软键盘的弹起、收回进行相应操作，并且Android、IOS表现有所不同。
IOS软键盘弹起
在 IOS 上，输入框（ input、 textarea 或 富文本）获取焦点，键盘弹起，页面并没有被压缩，或者说高度（height）没有改变，只是页面整体往上滚了，且最大滚动高度（scrollTop）为软键盘高度。
Android软键盘弹起
在 Android 上，输入框获取焦点，键盘弹起，但是页面高度会发生改变，一般来说，高度为可视区高度（原高度减去软键盘高度），除了因为页面内容被撑开可以产生滚动， 页面本身不能滚动。
IOS软键盘收起
触发软键盘上的“收起”按钮键盘或者输入框以外的页面区域时，输入框失去焦点，软键盘收起。
Android软键盘收起
触发输入框以外的区域时，输入框失去焦点，软键盘收起。但是，触发键盘上的收起按钮键盘时，输入框并不会失去焦点，同样软键盘收起。

2、监听软键盘弹起和收起

在 IOS 上，监听输入框的 focus 事件来获知软键盘弹起，监听输入框的 blur事件获知软键盘收起。
在 Android 上，监听页面高度会变化，高度变小获知软键盘弹起，否则软键盘收起。

3、弹起软键盘始终让输入框滚动到可视区

输入框获取焦点，弹起软键盘。当输入框位于页面下部位置时，在 IOS 上，会将页面整体往上滚一段距离，使得该获取焦点的输入框自动处于可视区，而在 Android 则不会这样，它只会改变页面高度，而不会去滚动到当前焦点元素到可视区。
只需在 Android 键盘弹起后，将焦点元素滚动（ scrollIntoView()）到可视区。

4、键盘收回，页面不回弹，导致留白

IOS 的 bug，微信官方已给出解决方案，只需在软键盘收起后，将页面滚回到窗口最底部位置（clientHeight位置）。

5、兼容第三方输入法

输入区是绝对定位，大部分 Android 浏览器是没问题的，但是测试在 IOS 上， UC 浏览器配合原生输入法和第三方输入法（比如搜狗输入法），输入框都会被完全挡住；QQ 浏览器或微信浏览器，配合第三方输入法，输入框会被遮住一半；百度浏览器配合第三方输入法输入框也会被完全遮住。
总之是页面滚动不到位造成的。可以让软键盘弹起后，让焦点元素再次滚到可视区，强迫页面滚到位。

6、兼容 Android 小米浏览器的 Hack 方案

在 Android 的小米浏览器上，应用上面的方案，发现聊天输入框还是被遮挡， scrollIntoView() 仍然纹丝不动。所以猜测，其实是滚到底了，软键盘弹起，页面实现高度大于可视区高度，这样只能在软键盘弹起后，强行增加页面高度，使输入框可以显示出来。综合上面兼容第三方输入法。