h5項目中關於ios手機軟鍵盤導致頁面變形的完美解決方案


1、項目背景:vue項目,手機加短信驗證碼登錄;

2、問題: 在ios中input吊起軟鍵盤,輸入完成后,收起軟件盤,頁面不會回彈,導致頁面下方出現空白,也就是頁面變形;

3、最開始的解決方案是,用input的失去焦點事件@focusout,在input失去焦點的時候讓頁面回滾到頂部,具體代碼如下:

// 首先,判斷觸發事件的目標元素是否是input輸入框,我們只關注輸入框的行為。
      if (e && e.target && e.target.tagName && e.target.tagName.toLowerCase() === 'input') {
          window.scrollTo(0, 0)
      }

  這樣可以解決頁面變形問題,但是切換input的時候,會出現頁面先滾動然后又回到光標位置,就是頁面先執行了失去焦點事件,回到頂部,然后input又獲取焦點,重新回到當前位置;

表現形式如下:

4、最終優化方案是:用定時器延時執行@focusout,在添加一個@focusin事件;

如果是input切換,則直接取消定時器,不在執行回到頂部的代碼,這樣頁面就不會回滾;

如果時輸入完成,則延時20ms后再回到頁面頂部,這樣完美解決該問題;

具體代碼如下:

<div class="login" v-if="isLogin"  @focusout="handleInputBlur" @focusin="handleInputBin">
        <div>
          <input class="phone" v-model="phone"  type="number" placeholder="請輸入">
        </div>
        <div class="sms-body">
          <div>
            <input class="sms" type="number"  placeholder="請輸入">
          </div>
          <div>
             <button class="smsBtn" v-if='sendAuthCode'  @click="handleGetSms">{{smsBtn}}</button>
             <button class="timeBtn" v-else >{{smsBtn}}</button>
          </div>
        </div>
        <div>
          <button class="post-phone-btn" @click="handlePostBtn">綁定</button>
        </div>
      </div>
// 針對ios鍵盤導致頁面變形的處理----冒泡獲取所有失去焦點事件
    // 將獲得失去焦點時間延時執行,如果再重新獲取焦點則清除定時器,不將頁面回滾到頂部,避免出現頁面來回滾動的情況
    // 如果輸入完成之后,沒有在重新獲取焦點,則延時20ms后再將頁面回彈到頂部
    handleInputBlur (e) {
      if (this.timer) {
        clearTimeout(this.timer)
      }
      // 首先,判斷觸發事件的目標元素是否是input輸入框,我們只關注輸入框的行為。
      if (e && e.target && e.target.tagName && e.target.tagName.toLowerCase() === 'input') {
        this.timer = setTimeout(() => {
          window.scrollTo(0, 0)
        }, 20)
      }
    },
    // 獲得焦點事件
    handleInputBin (e) {
      if (this.timer) {
        clearTimeout(this.timer)
      }
    }

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM