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指令便可轻松解决~~