소프트 키보드 전화 iOS에서 H5 프로젝트는 페이지 완벽한 솔루션의 변형을 초래할

프로젝트 배경 : VUE 프로젝트, 전화 및 SMS 인증 코드;

2. 질문 : 입력에서 소프트 키보드를 들어 올려 IOS는 입력이 완료, 소프트웨어 디스크를 버리고 페이지는 페이지의 변형입니다 아래의 빈 페이지, 결과적으로 회복하지 않을 것이다;

페이지 상단에 입력 롤 다시는 특정 코드는 다음과 같이 그래서 때 3, 가장 좋은 방법은, 이벤트의 입력과 @focusout가 포커스를 잃고 시작하는 것입니다 초점을 잃는다 :

// 먼저, 이벤트를 트리거 대상 요소는 입력 상자가, 우리 만 입력 상자의 행동에 관심을 입력 여부를 결정합니다. 
      IF (E e.target.tagName & & & & & & e.target e.target.tagName.toLowerCase () === 'INPUT' ) {
          window.scrollTo ( 0, 0 )
      }

　　이 왜곡 페이지의 문제를 해결하지만, 입력을 전환 할 때, 커서 위치를 다시 제 다음 페이지 스크롤링이있을 것, 첫 번째 페이지가 실행될 이벤트 포커스 위로 가기 상실하고 그들 현재의 위치에 입력 포커스를 다시 얻는다;

다음과 같이 양식은 다음과 같습니다 :

4, 최종 최적화는 다음과 같습니다, 지연 실행 @focusout에 타이머를 사용하십시오 @focusin 이벤트를 추가;

입력이 전환되면, 직접 부호의 선두에 복귀 현재 페이지 롤백되지 실행되지 않고, 상기 타이머를 취소;

입력이 완료되면, 다시 페이지 상단으로 20ms의 지연하고, 문제에 대한 완벽한 솔루션 그래서;

특정 코드는 다음과 같이 :

<DIV 클래스 = "로그인"V- 경우 = "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)
      }
    }