移動端 input 鍵盤落下，頁面未落下

問題描述

移動端項目，當前頁面只有一個輸入框，填充內容後，點擊提交，鍵盤落下，頁面未落下
後續會有彈框，頁面如果未落下，則彈框展示有問題，切點擊彈框按鈕不起作用

解決方案

第一種 （網上流傳的方法，但對我不起作用）

$("input").on("blur",function(){
    window.scroll(0,0);//失焦後強制讓頁面歸位
});

第二種 （可以解決）

<input v-model="code" type="text" 
@focus="isDown = false" @blur="downKey()" 
placeholder="請輸入兌換碼">

// data 定義
isDown: true
// 收回鍵盤
      downKey() {
        let timer = setTimeout(() => {
          clearTimeout(timer)
          document.documentElement.scrollTop = document.body.scrollHeight
          document.body.scrollTop = document.body.scrollHeight
          this.isDown = true
        }, 20)
      }
      
  // 點擊兌換
  change() {
        if(!this.isDown) this.downKey()
        // xxxxx
  }     

如果只給input加失焦事件，用戶輸入完數據，直接點擊按鈕，則失焦事件可能不起作用，所以需要在 提交事件 中增加判斷。