HTML:
<section>
<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;
}
},
},