JAVA高级面试进阶训练营视频教程

admin

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