vue实现模拟手机支付宝/微信输入6位验证码


这是一个输入六位验证码的弹窗,在输入一位数字可以自动跳到下一个输入框,和删除当前输入框的内容后聚焦到上一个输入框,并且输满六位验证码后调接口验证验证码是否正确.
今天想简单分享一下,当然也有参考过一些大神的代码,最后才实现了这样的效果,如果有错误还请多指教

先看看效果:

效果图片

在这里插入图片描述
在这里插入图片描述

源代码

1.template代码

<template>
  <div class="container">
    <div class="modal-backdrop"  v-show="isModalVisible"    @click="closeBackground"  >
      <div class="modal" @click.stop>
      <div class="font1">获取验证码</div>
      <div class="font2">验证码已发送至(+86{{telephone}}</div>
      <div class="code-input-main" >
    <input 
        pattern="\d*"
        class="code-input-main-item" 
        id="phoneCode1" 
        v-model="phoneCode0" 
        oninput="value=value.length>1?value.substr(0,1):value;"  
        maxlength="1" 
        type="number"/><input 
        pattern="\d*"
        class="code-input-main-item" 
        id="phoneCode2"
        v-model="phoneCode1"  
        oninput="value=value.length>1?value.substr(0,1):value;"  
        maxlength="1" 
        type="number"/><input 
        pattern="\d*"
        class="code-input-main-item" 
        id="phoneCode3" 
        v-model="phoneCode2" 
        oninput="value=value.length>1?value.substr(0,1):value;"  
        maxlength="1" 
        type="number"/><input 
        pattern="\d*"
        class="code-input-main-item" 
        id="phoneCode4" 
        v-model="phoneCode3"  
        oninput="value=value.length>1?value.substr(0,1):value;"  
        maxlength="1" 
        type="number"/><input 
        pattern="\d*"
        class="code-input-main-item" 
        id="phoneCode5" 
        v-model="phoneCode4" 
        oninput="value=value.length>1?value.substr(0,1):value;"  
        maxlength="1" 
        type="number"/><input 
        pattern="\d*"
        class="code-input-main-item" 
        id="phoneCode6" 
        v-model="phoneCode5"  
        oninput="value=value.length>1?value.substr(0,1):value;"  
        maxlength="1" 
        type="number"/>
      </div>
      </div>
    </div>
  </div>
</template>

   
   
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55

2.script代码

<script>
export default {
  data() {
    return {
            isModalVisible:true, // 是否展示获取验证码弹窗
            phoneCode:"",  // 验证码6位
            phoneCode0:"", // 输入框1的值
            phoneCode1:"", // 输入框2的值
            phoneCode2:"", // 输入框3的值
            phoneCode3:"", // 输入框4的值
            phoneCode4:"", // 输入框5的值
            phoneCode5:"", // 输入框6的值
            telephone:"1333***8912", // 手机号
<span class="token punctuation">}</span><span class="token punctuation">;</span>

},
mounted() {
this.goNextInput(’.code-input-main-item’);// 实现输入框自动聚焦
},
methods: {
closeBackground(){ // 关闭验证码弹窗
this.isModalVisible=false
},
goNextInput(el){ // 实现输入框自动聚焦
var that = this;
var txts = document.querySelectorAll(el);// 获取所有input对象
for(var i = 0; i<txts.length;i++){ // 循环input添加监听事件
var t = txts[i];
t.index = i; // input赋值索引值
t.onkeydown=function(e){ // 键盘按下时
var e = e ? e : event;
var k = e.keyCode || e.which;
if (k == 8) { // 如果是删除事件
if(this.value!=""){ // 如果当前input不为空
this.value = “”; // 清空当前input的值
switch(this.index) { // 根据索引值判断是当前哪个input的值需要被清空
case 0:
that.phoneCode0 ="";
break;
case 1:
that.phoneCode1 ="";
break;
case 2:
that.phoneCode2 ="";
break;
case 3:
that.phoneCode3 ="";
break;
case 4:
that.phoneCode4 ="";
break;
case 5:
that.phoneCode5 ="";
break;
}
}else{ // 当前input为空,则聚焦到上一个input
var back = this.index-1;
that.value = “”;
if(back <0) return; // 如果索引值小于0,则返回
txts[back].focus();
}
}
}
t.onkeyup=function(e){ // 键盘松开时
var e = e ? e : event;
var k = e.keyCode || e.which;
if (k != 8) { // 如果不是删除事件
that.value=this.value.replace(/^(.).*$/,’$1’);// 当前输入框保留一位数字
var next = this.index + 1; // 索引值加1
if(next > txts.length-1 ) // 如果是最后一个input时执行事件
{ that.phoneCode = “”;
that.phoneCode = that.phoneCode0+that.phoneCode1+that.phoneCode2+that.phoneCode3+that.phoneCode4+that.phoneCode5;
// that.CheckSmsCode(); // 验证验证码是否正确
return;
}
if (this.value) { txts[next].focus(); } // 如果有值则跳到下一个input
}
}
}
},

} // methods
};
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84

在实现删除当前输入框的值并且自动聚焦到上一个input的时候碰到了一个坑
使用js清除input的value值时发现怎样都清除不了输入框的值
有一个短暂的清空效果随后又赋值, 当时怎么也想不通为什么
后来发现是因为input输入框使用了vue的v-model双向绑定
每个input都绑定了一个data值,因此在清除input的value同时还要清除其绑定的data数据,否则没办法清除input的值
当然其实input可以不使用v-model绑定值的,可以全程使用js来获取input对象里的值,但是当时觉得方便取值

3.style部分(less语言)

<style  lang="less" scoped >
 @color:rgba(255,96,5,1);
 /* 遮罩层 */
.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}
/* 弹窗 */
.modal {
width:670px;
height:480px;
background:rgba(255,255,255,1);
border:2px solid rgba(230,230,230,1);
border-radius:10px;
padding: 0 92px;
  /* 行 */
}
.font1{ // 获取验证码字体
    width:210px;height:40px;font-size:40px;font-family:Microsoft YaHei;font-weight:400;
    color:rgba(40,40,40,1); line-height:40px;margin-top: 58px;
}
.font2{ // 验证码已发送至(+86)
    width:550px;height:29px;font-size:28px;font-family:Microsoft YaHei;font-weight:400;color:rgba(40,40,40,1);line-height:29px;
    margin-top: 40px;
}
.code-input-main { //  输入验证码div
    width:100%;
    height: 60px;
    text-align: center;
    margin-top: 56px;
}
.code-input-main-item {  // input的样式
    width:60px;
    height:60px;
    padding: 2px;
    border:2px solid rgba(230,230,230,1);
    border-radius:6px;
    display: inline-block;
    &:not(:first-child){  margin-left:25px;}
    &:first-child{
        margin-left: -4px;
    }
    text-align: center;
    z-index: 1;
    font-size: 40px;
    vertical-align: top;

}
input { // 原生input样式清除
background: none;
outline: none !important;
-webkit-appearance: none !important;
-webkit-appearance: none !important;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}
</style>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值