input輸入框，在手機上，軟鍵盤會將固定定位和絕對定位的按鈕頂起，解決辦法

原理：通過監聽window窗口的高度變化，來控制顯示和隱藏按鈕

注意：如果是點擊鍵盤上的收起，可以監聽到，但是如果是因為input失去焦點，則不會監聽到窗口變化，所以我們需要同時判斷input失去焦點

 

html

        <input
              type="text"
              class="input"
              @blur="focusBlur('blur')"
              @focus="focusBlur('focus')"
              v-model="item.eleValue"
              :placeholder="'請輸入'+item.eleName"
            />    

<button class="fixed_btn" @click="submit()" v-show="keyboardHide ||!inputFocus">確認報名</button>

 

 

js

//navigator.userAgent.indexOf用來判斷瀏覽器類型
    var isAndroid = navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Adr') > -1;
    if (isAndroid){//如果是安卓手機的瀏覽器
        let clientHeight = document.body.clientHeight;
        window.addEventListener('resize', function () {   
            // Document 對象的activeElement 屬性返回文檔中當前獲得焦點的元素。
            if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') {
              let clientHeight2 = document.body.clientHeight;
              if(clientHeight>clientHeight2){
                _this.keyboardHide = false;
              }else{
                _this.keyboardHide = true;
              }
            }
        });
    }

// input失去獲取焦點  設置個延遲時間，防止按鈕閃爍
    focusBlur(type){
      let _this = this;
      setTimeout(function(){
        if(type == 'focus'){
          _this.inputFocus=true
        }else if(type == 'blur'){
          _this.inputFocus=false
        }
      },150)
    },