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

Posted 2022-12-11 明天也要努力

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>

3. 相关知识拓展

传送门：ES6新特性 类（class）详解
传送门：JavaScript window 对象详解