Android 下面调起键盘后的样式兼容性问题

Android 上写 H5 页面，我们想实现的是一下图片的”完成”按钮相对底部进行 absolute 定位。

原本实现的效果如下：

但是，调起键盘后，这个“按钮”的位置变了，和计划的不一样。居然跑到上面来了~~。

现在觉得，嗯，还好，可以接受。那么问题来了，如果输入框很多，调起键盘变成这样了呢。。。这就尴尬了，所以，必须来解决这个问题了。

定位问题： 为什么 IOS 下面没问题，Android 下面就有问题了呢？原因是：在输入框获取焦点和失去焦点的时候，Android 下面的 body 的高度会变为减去键盘的高度，所以定位的时候相对 body 定位会出问题。但是，body 的滚动高度没变。（IOS）就是调起键盘的时候 body 的高度等于 body 的滚动高度。所以，我们模仿 IOS 的实现原理来解决这个问题。

首先，新建 keyboard.js 文件

/* eslint-disable */
/**
 * Created by baidu on 16/9/13.
 * @file 为input元素强制绑定focus事件，修改body高度，来解键盘弹起定位bug
 */
import Vue from 'vue'
let keyboard = {
    bind: function (el) { // el是绑定视图区的父元素
        Vue.nextTick(function () {
        var inputs =     document.querySelectorAll('input', el);
        for (var i = 0; i < inputs.length; i++) {
             inputs[i].addEventListener('focus',  keyboard.changeBodyHeight)//focus的时候改变body的高度
            }
        });
    },
    unbind: function (el) {
        var inputs = document.querySelectorAll('input', el);
        for (var i = 0; i < inputs.length; i++) {
            inputs[i].removeEventListener('focus', keyboard.changeBodyHeight)//失去焦点的时候再次改变body的高度
        }
    },
    changeBodyHeight: function () {
        document.body.style.height = document.body.scrollHeight + 'px';
    },
    priority: 1000
};
export default keyboard;

在需要调用的时候添加该指令

结果：

至此，我们封装了调起键盘的指令，之后遇到的所有页面，只需要添加keyboard指令便可轻松解决~~