Vue中监听移动端软键盘弹出、收起事件

飞熊 • 2023年4月28日上午10:14 • 前端开发 • 阅读 400

1. 封装监听移动端软键盘弹出、收起事件的类

iOS 系统中软键盘弹起时，虽然仅会引起 $(‘body’).scrollTop 值改变，但可通过输入框的获取焦点情况来做判断。
但也只能在 iOS 系统中采用这个方案，因为在 Android 系统中存在主动收起键盘后，输入框并不失焦的情况。
Android 系统中软键盘弹起或收起时，都会引起窗口的高度发生变化，因此可监听 window 的 onresize 事件；
focusin 和 focusout 对应 focus 和 blur。使用 focusin 和 focusout 的原因：focusin 和 focusout 可以冒泡，focus 和 blur不会冒泡，这样就可以使用事件代理，处理多个输入框存在的情况。

/**
 * @class 监听虚拟键盘
 * @classdesc 监听虚拟键盘弹出隐藏
 * @public onEnd 结束监听虚拟键盘
 * @public onShow 传递一个回调 监听虚拟键盘弹出
 * @public onHidden 传递一个回调 监听虚拟键盘隐藏
 */
class MonitorKeyboard {
  constructor() {
    this.type = this.IsIA();
    this.originalHeight = window.innerHeight;
  }
 
  /**
   *  @function IsIA 获取设备类型
   *  @param  1 Android 2 iOS  
   */
  IsIA = () => {
    const userAgent = typeof window === 'object' ? window.navigator.userAgent : '';
    if (/android/i.test(userAgent)) {
      return 1; 
    } else if (/iPhone|iPod|iPad/i.test(userAgent)) {
      return 2; 
    }
  }

  // Android系统
  onResize = () => {
    //键盘弹起与隐藏都会引起窗口的高度发生变化
    const resizeHeight = window.innerHeight;

    if (this.originalHeight - resizeHeight > 50) {
      this.show('Android系统: 软键盘弹出');
    } else {
      this.hidden('Android系统: 软键盘收起');
    }
  }

  // iOS获取焦点
  onFocusin = () => {
    this.show('iOS系统:软键盘弹出');
  }
 
  // iOS失去焦点
  onFocusout = () => {
    this.hidden('iOS系统:软键盘收起');
  }

  /**  
   * @function onStart 开始监听虚拟键盘  
   */
  onStart = () => {
    if (this.type == 1) {
      // 获取窗口的高度
      window.addEventListener('resize', this.onResize);
    }
    if (this.type == 2) {
      // iOS系统
      window.addEventListener('focusin', this.onFocusin);
      window.addEventListener('focusout', this.onFocusout);
    }
  }
 
  /** 
   * @function onEnd 结束监听虚拟键盘  
   */
  onEnd = () => {
    if (this.type == 1) {
      //获取窗口的高度
      window.removeEventListener('resize', this.onResize);
    }
    if (this.type == 2) {
      window.removeEventListener('focusin', this.onFocusin);
      window.removeEventListener('focusout', this.onFocusout);
    }
  }
 
  /**
   * @function  onShow 传递一个回调函数
   * @param  虚拟键盘弹出时触发
   */
  onShow = (fn) => {
    this.show = fn;
  }
   
  /**
    * @function  onHidden 传递一个回调函数
    * @param  虚拟键盘隐藏时触发
    */
  onHidden = (fn) => {
    this.hidden = fn;
  }
}
 
export default MonitorKeyboard

2. 使用

<template>
  <div>
    <input type="text" v-model="inputVal">
  </div>
</template>

<script>
import MonitorKeyboard from '@/utils/monitorKeyboard.js'
export default {
  data(){
    return {
      monitorKeyboard:null,
      inputVal:'',
    }
  },
  methods:{
    getKeyboardState(){
      this.monitorKeyboard = new MonitorKeyboard();
      this.monitorKeyboard.onStart();

      // 监听虚拟键盘弹出事件
      this.monitorKeyboard.onShow(() => {  
        console.log('键盘弹出')
      })

      //监听键盘收起的事件
      this.monitorKeyboard.onHidden(() => {
        console.log('键盘收起')
      })
    }
  },
  mounted(){
    this.getKeyboardState();
  },
  beforeDestroy(){
    this.monitorKeyboard.onEnd();
  },
}
</script>