新建monitorKeyboard.js文件

         /**
 * @class 監(jiān)聽(tīng)虛擬鍵盤(pán)
 * @classdesc 監(jiān)聽(tīng)虛擬鍵盤(pán)彈出隱藏
 * @public onEnd 結(jié)束監(jiān)聽(tīng)虛擬鍵盤(pán)
 * @public onShow 傳遞一個(gè)回調(diào) 監(jiān)聽(tīng)虛擬鍵盤(pán)彈出
 * @public onHidden 傳遞一個(gè)回調(diào) 監(jiān)聽(tīng)虛擬鍵盤(pán)隱藏
 */
 class MonitorKeyboard {
    constructor() {
      this.type = this.IsIA();
      this.originalHeight = window.innerHeight;
    }
   
    /**
     *  @function IsIA 獲取設(shè)備類型
     *  @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系統(tǒng)
    onResize = () => {
      //鍵盤(pán)彈起與隱藏都會(huì)引起窗口的高度發(fā)生變化
      const resizeHeight = window.innerHeight;
  
      if (this.originalHeight - resizeHeight > 50) {
        this.show('Android系統(tǒng): 軟鍵盤(pán)彈出');
      } else {
        this.hidden('Android系統(tǒng): 軟鍵盤(pán)收起');
      }
    }
  
    // iOS獲取焦點(diǎn)
    onFocusin = () => {
      this.show('iOS系統(tǒng):軟鍵盤(pán)彈出');
    }
   
    // iOS失去焦點(diǎn)
    onFocusout = () => {
      this.hidden('iOS系統(tǒng):軟鍵盤(pán)收起');
    }
  
    /**  
     * @function onStart 開(kāi)始監(jiān)聽(tīng)虛擬鍵盤(pán)  
     */
    onStart = () => {
      if (this.type == 1) {
        // 獲取窗口的高度
        window.addEventListener('resize', this.onResize);
      }
      if (this.type == 2) {
        // iOS系統(tǒng)
        window.addEventListener('focusin', this.onFocusin);
        window.addEventListener('focusout', this.onFocusout);
      }
    }
   
    /** 
     * @function onEnd 結(jié)束監(jiān)聽(tīng)虛擬鍵盤(pán)  
     */
    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 傳遞一個(gè)回調(diào)函數(shù)
     * @param  虛擬鍵盤(pán)彈出時(shí)觸發(fā)
     */
    onShow = (fn) => {
      this.show = fn;
    }
     
    /**
      * @function  onHidden 傳遞一個(gè)回調(diào)函數(shù)
      * @param  虛擬鍵盤(pán)隱藏時(shí)觸發(fā)
      */
    onHidden = (fn) => {
      this.hidden = fn;
    }
  }
   
  export default MonitorKeyboard
  

在用到的vue頁(yè)面寫(xiě)

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


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

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

          // 監(jiān)聽(tīng)虛擬鍵盤(pán)彈出事件
          this.monitorKeyboard.onShow(() => {  
              console.log('鍵盤(pán)彈出')
          })

          //監(jiān)聽(tīng)鍵盤(pán)收起的事件
          this.monitorKeyboard.onHidden(() => {
            // console.log('鍵盤(pán)收起')
            // 執(zhí)行的其他操作
		    if(this.scenic){
		    this.showBut = false
		    }
          })
      }
   },
beforeDestroy(){
    this.monitorKeyboard.onEnd();
  },

文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-534547.html

到了這里，關(guān)于解決uniapp H5端 監(jiān)聽(tīng)鍵盤(pán)的彈出，收起 執(zhí)行其他操作的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！