h5(移动端) 监听软键盘弹起、收起

https://blog.csdn.net/qq_38296051/article/details/109290225
https://blog.csdn.net/qq_42231156/article/details/103490964
https://www.cnblogs.com/rachelch/p/12858938.html

1、 安卓键盘弹起会触发页面的resize 事件（ios不会），所以可以通过判断页面高度的前后变化来判断键盘的状态。
2、 ios 在键盘收起的时候input 会失去焦点（安卓不会），所以可以通过input 的focus 和 blur 事件来判断键盘的状态

<van-search
  v-model="value"
  placeholder="搜索"
  @focus="searchFocus"
  @blur="searchBlur"
/>
...
<app-tabbar v-show="showTabbar"></app-tabbar>

showTabbar: true,
originHeight: '',

mounted() {
  this.originHeight = document.documentElement.clientHeight || document.body.clientHeight;
  window.addEventListener('resize',this.handleResize);
  this.onLoad();
},

isIos() {
   var m = navigator.userAgent;
   var isIos = !!m.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
   let result = isIos ? true : false;
   return result;
 }, 
 
 searchFocus() {
   if (this.isIos()) {
     this.showTabbar = false;
     console.log(this.showTabbar,'ios---隐藏底部栏');
   }
 },
 
 searchBlur() {
   if (this.isIos()) {
     this.showTabbar = true;
     console.log(this.showTabbar,'ios---显示底部栏');
   }
 },
 
 handleResize() {
   var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
   if (resizeHeight < this.originHeight) {
     //当软键盘弹起，在此处操作
     if (!this.isIos()) {
       this.showTabbar = false;
       console.log(this.showTabbar,'安卓---隐藏底部栏');
     }
   } else {
     //当软键盘收起，在此处操作
     if (!this.isIos()) {
       this.showTabbar = true;
       console.log(this.showTabbar,'安卓---显示底部栏');
     }
   }
 },

beforeDestroy() {
  // 移除绑定的handleResize事件监听
  window.removeEventListener("resize",this.handleResize);
  console.log('移除resize监听');
},