输入框自动跳转光标

最新推荐文章于 2024-10-08 11:19:55 发布

qq_42417923

最新推荐文章于 2024-10-08 11:19:55 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

文章标签： VUE.JS

本文链接：https://blog.youkuaiyun.com/qq_42417923/article/details/80663407

本文介绍了一个使用Vue.js实现的16位密码输入系统。该系统通过四个独立的输入框接收密码，每输入四位密码，焦点会自动跳转到下一个输入框。此外，当用户删除部分输入的密码时，焦点也会自动回到相应的输入框，确保了良好的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML:

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