解决uniapp H5端监听键盘的弹出，收起执行其他操作-Toy模板网

这篇具有很好参考价值的文章主要介绍了解决uniapp H5端监听键盘的弹出，收起执行其他操作。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

新建monitorKeyboard.js文件

         /**
 * @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

在用到的vue页面写

    import monitorKeyboard from '@/utils/monitorKeyboard.js'


mounted() {
	   this.getKeyboardState();
   },

methods: {
	  getKeyboardState(){
          this.monitorKeyboard = new monitorKeyboard();
          this.monitorKeyboard.onStart();

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

          //监听键盘收起的事件
          this.monitorKeyboard.onHidden(() => {
            // console.log('键盘收起')
            // 执行的其他操作
		    if(this.scenic){
		    this.showBut = false
		    }
          })
      }
   },
beforeDestroy(){
    this.monitorKeyboard.onEnd();
  },