vue在ios端键盘弹起底部空白

问题描述，在ios微信端打开项目，输入信息，收起键盘后底部有空白。

原因：ios第三方键盘在收起时没有监听到

可以通过js控制键盘的显示和隐藏时页面的高度

首先引入jquery :npm install jquery --save-dev

webpack.base.conf文件中添加配置：

plugins:[
  new webpack.ProvidePlugin({
    $:"jquery",
    jQuery:"jquery",
    "windows.jQuery":"jquery"
  })
],

在main.js中引入jquery: import $ from 'jquery';然后就可以开始使用了

var u = navigator.userAgent, app = navigator.appVersion;
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //判断是否是ios,函数只在ios下执行
if(isiOS){
  $(document).on('focusin',function(){
    let lengths = $(".changeHeight").height();
    let  val = lengths + 500;
    $(".changeHeight").height(val);
  })
  $(document).on("focusout",function(){
    let lengths = $(".changeHeight").height();
    let  val = lengths - 500;
    $(".changeHeight").height(val);
  })
}

之前在查找资料的时候也看到一些童鞋写的关于android方便监听键盘的方法，保存一下，以供参考：

移动端软键盘的监听（弹起和收起）

1 Android监听 resize

var winHeight = $(window).height();  //获取当前页面高度
$(window).resize(function () {
  var thisHeight = $(this).height();
  if ( winHeight - thisHeight > 140 ) {
    //键盘弹出
  } else {
    //键盘收起
  }
})

140是一个预估值的阀值，用来排除其他的resize操作。仅resize的高度差大于140时，才被识别为软键盘交互，否则不是。如浏览器的工具栏、搜索栏的隐藏，window的窗口页会有一个较小的变化。

resize键盘监听方法二：

var originalHeight=document.documentElement.clientHeight ||document.body.clientHeight;

window.onresize=function(){

    //键盘弹起与隐藏都会引起窗口的高度发生变化

       Var resizeHeight=document.documentElement.clientHeight || document.body.clientHeight;

        if(resizeHeight-0<originalHeight-0){

         //当软键盘弹起，在此处操作

         }else{

         //当软键盘收起，在此处操作

         }

}

写在最后的话:通过亲测安卓端可以触发focusin事件，但是无法触发focuout，是因为在键盘收起后光标依然在input输入框中