h5 project on the soft keyboard phone ios lead to deformation of the page perfect solution

Project Background: vue project, phone and SMS verification code;

2. Question: ios lifting the soft keyboard in the input, the input is completed, put away the software disk, the page will not rebound, resulting in a blank page below, which is the page deformation;

3, the best solution is to start, @focusout with the input of the event loses focus, loses focus when the input roll back to the top of the page so that the specific code as follows:

// First, determine whether the target element that triggered the event is input the input box, we are only concerned with the behavior of the input box. 
      IF (E e.target.tagName && && && e.target e.target.tagName.toLowerCase () === 'INPUT' ) { 
          the window.scrollTo ( 0, 0 ) 
      }

　　This will solve the problem of distortion page, but when switching input, there will be scrolling the page first and then back to the cursor position, the first page is executed event loses focus, back to the top, and then they get input focus back to the current location;

Forms are as follows:

4, the final optimization is: use a timer to delay execution @focusout, add a @focusin event;

If the input is switched, directly cancel the timer, return to the top of the code is not executed, this page will not be rolled back;

If the input is completed, the delay of 20ms and then back to the top of the page, so the perfect solution to the problem;

Specific code as follows:

<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)
      }
    }