移動端H5 input輸入完成後頁面底部留白問題

說明

最近在用 vue寫幾個H5頁面在微信上展現，遇到一個在彈窗上 input輸入完成以後點擊鍵盤的完成，頁面底部留出一片空白的問題

出現緣由分析

• 當鍵盤擡起時，window.scrollY會從0變到鍵盤的高度，因此解決辦法就是當input失去焦點的時候，將window.scrollY從新設置爲0

解決

• 給全部的input`textarea組件設置獲取焦點和設置焦點事件，失去焦點的時候將`window.scrollY`設置爲0
• 由於的是vue因此結合vue來寫代碼

<template>
  <input class="m-input" :value="value" @input="$emit('input', $event.target.value)" @focus="inputFocus()" @focusout="inputFocusOut">
</template>

<script>
  export default {
    name: "MInput",
    props:['value'],
    data(){
      return{
        timer:null
      }
    },
    methods:{
      inputFocus(){
        if(this.timer){
          clearTimeout(this.timer)
        }
      },
      inputFocusOut(){
        this.timer = setTimeout(() => {
          window.scrollTo(0,0)
        },10)
      }
    },
    destroyed(){
      if(this.timer){
        clearTimeout(this.timer)
      }
    }
  }
</script>

• 獲取焦點事件，判判定時器是否存在若是存在的話清除掉（上一個input設置的定時器）
• 失去焦點事件，將window.scrollY設置爲0,而且給一個10的定時器，減小頁面失去焦點的突兀感（爲了順滑一點點）
• destroyed vue組件中若是使用了定時器，必定要記得在組件銷燬的生命週期裏將清時期清除掉，防止全局定時器過多，容易爆棧

補充:解決方案2

• 在input上分別增長focus和blur的方法，基本能夠解決鍵盤迴落後留白問題；

handleFocus(event) {
    let e = event.currentTarget;
    setTimeout(() => {
        e.scrollIntoView({
            block: 'start',
            behavior: 'smooth'
        });
    }, 300);
}
handleblur() {
    let e = event.currentTarget;
    setTimeout(() => {
        e.scrollIntoView({
            block: 'end',
            behavior: 'smooth'
        });
    }, 300);
     window.scrollTo(0, 0);
}

補充:解決方案3

//解決鍵盤彈出後擋表單的問題
    window.addEventListener('resize', function() {
      if(
        document.activeElement.tagName === 'INPUT' ||
        document.activeElement.tagName === 'TEXTAREA'
      ) {
        window.setTimeout(function() {
          if('scrollIntoView' in document.activeElement) {
            document.activeElement.scrollIntoView();
          } else {
            document.activeElement.scrollIntoViewIfNeeded();
          }
        }, 0);
      }
    });

補充:頁面來回彈跳

• 問題:失焦時的scrollTop=0形成的頁面彈跳。原本iOS是作了這方面的優化，在軟鍵盤彈出和收起時頁面會smooth的平滑，因爲我加了scrollIntoView破壞了原生的優化致使彈跳了
• 解決:

handleFocus(event) {
    clearTimeout(this.timer);
}
handleblur() {
    this.timer = setTimeout(() => {
        document.body.scrollTop = 0;
        window.pageXOffset = 0;
        document.documentElement.scrollTop = 0;
    }, 100);
}

最後

• 本文首發於:移動端H5 input輸入完成後頁面底部留白問題
• 補充參考:一文完全解決iOS中鍵盤迴落後留白問題
• 更新於2019/06/13