h5 iPhone6plus测试 底部有两个input，从其中一个点击到另一个输入框中时，输入框区域被虚拟键盘覆盖

Question

<div class="loginForm">
      <p>请输入中国移动手机号</p>
      <div class="inp inp1">
        <input
          type="tel"
          class="tel"
          maxlength="11"
          onkeyup="this.value=this.value.replace(/\D/g,'')"
          v-model="phoneNumber"
          @blur="udata2"
          @click="cm1"
          placeholder="您的手机号"
          id="in1"
        >
        <span><img src="../../assets/images/login/phone2.png" alt=""></span>
      </div>
      <div class="inp inp1">
        <input
          type="tel"
          class="number"
          maxlength="6"
          oninput="if(value.length>6)value=value.slice(0,6)"
          v-model="sendNumber"
          @input="getInputVals"
          @blur="udata3"
          @click="cm2"
          id="in2"
          placeholder="您的验证码"
        >
        <span class="inp1span"><img src="../../assets/images/login/smcode2.png"
                                    alt=""></span>
        <div
          class="sendButton"
          @mousedown="getsendNumber"
          v-bind:disabled="isDisable"

        >

          <span class="getCodeDoc">{{getcodemsg}}</span>
        </div>
      </div>
      <div class="loginButton" @mousedown="getlogin" >
        <img
          src="../../assets/images/login/login2.png"
          alt="">
      </div>
    </div>

js

      cm1() {
        this.scrollTop = document.scrollingElement.scrollTop;
      },
      cm2() {
        this.scrollTop2 = document.scrollingElement.scrollTop;
      },

  udata2() {
    document.scrollingElement.scrollTo(0, this.scrollTop);
  },
  udata3() {
    document.scrollingElement.scrollTo(0, this.scrollTop2);
  },

Answer 1

使用flex方式布局、不要使用定位