输入框自动跳转光标

HTML:

<section>

      <p class="font_p">请刮开卡券密码,输入16位密码</p>
      <div class="input_div">
          <input type="text" v-model="card1" v-focus="focusStatus == 1" @focus="inputFocus" maxlength="4" @keydown="inputKeyDown">
          <img src="../../assets/images/point_recharge/line.png" />
          <input type="text" v-model="card2" v-focus="focusStatus == 2" @focus="inputFocus" maxlength="4" @keydown="inputKeyDown">
          <img src="../../assets/images/point_recharge/line.png" />
          <input type="text" v-model="card3" v-focus="focusStatus == 3" @focus="inputFocus" maxlength="4" @keydown="inputKeyDown">
          <img src="../../assets/images/point_recharge/line.png" />
          <input type="text" maxlength="4" v-model="card4" v-focus="focusStatus == 4" @focus="inputFocus" @keydown="inputKeyDown">
      </div>
      <div :class="classObj" @click="rechargeBtn" :disabled="activeDisable">兑换</div>
    </section>

VUE.JS:

watch:{
        card1:function (val,old){
          if(val.length == 4){
            this.focusStatus = 2;
          }else if(val.length == 0){
            this.focusStatus = 0;
          }
        },
        card2:function (val,old){
          if(val.length == 4){
            this.focusStatus = 3;
          }else if(val.length == 0){
            this.focusStatus = 1;
          }
        },
        card3:function (val,old){
          if(val.length == 4){
            this.focusStatus = 4;
          }else if(val.length == 0){
            this.focusStatus = 2;
          }
        },
        card4:function (val,old){
          if(val.length == 4){
            this.focusStatus = 0;
          }else if(val.length == 0){
            this.focusStatus = 3;
          }
        },

      },

methods:{
        inputKeyDown(event){
          if(event.keyCode == 8){
            if(this.activeDisable.length == 12){
              this.card3 = this.card3.substring(0,3);
              this.focusStatus = 3;
            }else if(this.activeDisable.length == 8){
              this.card2 = this.card2.substring(0,3);
              this.focusStatus = 2;
            }else if(this.activeDisable.length == 4){
              this.card1 = this.card1.substring(0,3);
              this.focusStatus = 1;
            }else{
              this.focusStatus = 0;
            }
          }
        },
        //按钮焦点设置
        inputFocus(){
          this.focusStatus = 0;
          if(this.activeDisable.length >= 12){
            this.focusStatus = 4;
          }else if(this.activeDisable.length >= 8){
            this.focusStatus = 3;
          }else if(this.activeDisable.length >= 4){
            this.focusStatus = 2;
          }else{
            this.focusStatus = 1;
          }

        },

},



猜你喜欢

转载自blog.csdn.net/qq_42417923/article/details/80663407