虚拟键盘，移动web开发的痛

原生APP的弹出虚拟键盘和收回虚拟键盘，输入框始终贴在虚拟键盘的上方。以下图：

若是移动端web也想作相似的功能，能够实现吗？
你可能会说着：“不就是放一个position: fixed;的输入框在页面底部嘛，有什么好难的？!”
当时我也是这么想的(⊙﹏⊙)，但事实真的是这样吗？下面咱们来看一些测试结果。
安卓4.2.1－qq浏览器，测试结果以下：

如图所示，输入框不见了。。。

再看看ios的safari：

为什么又多了条白带？
还有，收起键盘后，为啥页面下移了。。。
好吧，其实这只是问题的冰山一角。
进入正题，怎么才能解决这些问题呢？
咱们能够先从虚拟键盘入手，看看是否能够监听到呼出键盘、收回键盘这两个事件。
部分浏览器能够经过捕捉resize事件知道是否呼出收起虚拟键盘。
测试页： http://backtonaturedemo.github.io/frontend/case/keyborad/resize.html
下面是测试的结果

iPhone 5s iOS 8.2 ：
（n表示不能触发resize事件，y表示能触发resize事件）

注意： ios的UC浏览器中，点击fixed定位的输入框，呼出键盘后没法输入。

Coolpad8720Q Andorid 4.2.1

那么监听focus和blur事件又如何呢？

测试页： http://backtonaturedemo.github.io/frontend/case/keyborad/focusblur.html

用上述两台机器继续测试，结论以下：

1. ios和安卓点击输入框都会触发focus事件

2. ios的全部浏览器点击虚拟键盘的“完成“键或者其余方式收起键盘都会触发blur事件

3. 安卓手机在点击”收起按钮“或者其余操做收起键盘的时候，没有触发blur事件，焦点仍是在输入框上。
   下面为测试截图

因此，能够采起以下方案作web评论发表框

示例页面: http://backtonaturedemo.github.io/frontend/case/keyborad/demo1.html

除评论框之外的元素都放在一个父元素，这里父元素是main。

<div class="main">
    <img src="http://backtonaturedemo.github.io/frontend/case/keyborad/test.png" alt="">
    <img src="http://backtonaturedemo.github.io/frontend/case/keyborad/test1.png" alt="">
</div>

评论框和发布按钮放在一个div里

<div class="comment">
    <div class="buttons">
        <button class="sure cell">发表</button>
        <button class="cancel cell">取消</button>
    </div>
    <textarea class="input" placeholder="我来讲两句"></textarea>
</div>

1. 呼出键盘后，隐藏.main（除评论框之外的元素)

2. 撑高输入框，取消fixed，加入上外边距（给发表按钮留下位置）

3. 当输入框blur或点击取消，还原页面

注意： 须要在呼出键盘前，纪录下页面滚动条位置。