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

問題描述

移動端項目，目前頁面隻有一個輸入框，填充内容後，點選送出，鍵盤落下，頁面未落下
後續會有彈框，頁面如果未落下，則彈框展示有問題，切點選彈框按鈕不起作用           

複制

頁面布局

頁面整體不要設定 height:100%;overflow:hidden;

否則安卓端 點選input，頁面不會上頂，也無法滾動，可能會遮擋【兌換】按鈕，需要先收起鍵盤，再點選按鈕，影響使用者體驗~

<div class="convert-code-wrapper">
    <header class="cc-header"><span class="ico-cc-back" @click="back"></span>使用兌換碼<span></span></header>
    <div class="cc-main">
      <img src="@/XXX/ic-card.png" alt="">
      <input v-model="code" type="text" maxlength="16" @focus="isDown = false" @blur="downKey()" placeholder="請輸入XXX兌換碼">
      <p :class="{'cc-unchange' : !canChange}" @click="openMsgM">使用兌換碼</p>
    </div>
  </div>
  
  // SCSS
  $base-font-size: 37.5px;

  @function px2rem($px) {
    @return ($px / $base-font-size) * 1rem / 2;
  }
.convert-code-wrapper{
    width: 100%;
    background-color: #fff;
    position: relative;
    .cc-header{
      width: calc(100% - #{px2rem(60px)});
      font-size: px2rem(34px);
      color: #000;
      height: px2rem(98px);
      text-align: center;
      line-height: px2rem(98px);
      padding: px2rem(30px) px2rem(30px) 0;
      background-color: #fff;
      position: fixed;
      top: 0;
    }
    .cc-main{
      width: 100%;
      padding-top: px2rem(128px);
      background: url(../../XXX/bg-home.png) no-repeat top #fff;
      background-size: 100% auto;
      overflow: hidden;
      .cc-unchange{
        opacity: .4;
      }
      img, input {
        display: block;
        margin: auto;
      }
      img{
        width: px2rem(696px);
        height: auto;
        margin-top: px2rem(118px);
      }
      input{
        border: none;
        outline: none;
        padding: px2rem(20px) px2rem(50px);
        width: px2rem(420px);
        height: px2rem(50px);
        line-height: px2rem(50px);
        font-size: px2rem(34px);
        font-weight: 300;
        color: #333;
        background: url(../../XXX/bg-btn.png) no-repeat center #fff;
        background-size: 100% 100%;
        border-radius: px2rem(45px);
        overflow: hidden;
      }
      input::-webkit-input-placeholder {
          color: #999;
      }
      :-moz-placeholder {
          color: #999;
      }
      ::-moz-placeholder {
          color: #999;
      }
      :-ms-input-placeholder {
          color: #999;
      }
      p{
        width: px2rem(520px);
        height: px2rem(90px);
        line-height: px2rem(90px);
        text-align: center;
        font-size: px2rem(34px);
        color: #fff;
        background-color: #20a3ff;
        border-radius: px2rem(45px);
        overflow: hidden;
        margin: px2rem(50px) auto;
        &.cc-unchange{
          opacity: .4;
        }
      }
    }
  }           

複制

解決方案

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

$("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加失焦事件，使用者輸入完資料，直接點選按鈕，則失焦事件可能不起作用，是以需要在 送出事件 中增加判斷。