H5实现短信验证码文本框功能（依次聚焦文本框）

Myth丶恋晨 2023-01-03 01:44 401阅读 0赞

H5界面实现验证码校验（4位数6位数均可自定义）  
如图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTI4Njc0NA_size_16_color_FFFFFF_t_70]

HTML:

CSS：

.code {
    				       padding-left: 10px;
    				       padding-right: 20px;
    				       padding-top: 60px;
    				       margin-left: 80px;
    				 	  margin-top: 50px;
    				 	  width: 750px;
    				     }
    				     .heading-2 {
    				       color: #333333;
    				     }
    				     .v-code {
    				       margin-top: 20px;
    				       display: -webkit-box;
    				       display: -ms-flexbox;
    				       display: flex;
    				       -webkit-box-pack: justify;
    				       -ms-flex-pack: justify;
    				       justify-content: space-between;
    				       -webkit-box-align: center;
    				       -ms-flex-align: center;
    				       align-items: center;
    				       position: relative;
    				         
    				     }
    				     .v-code input {
    				       position: absolute;
    				        
    				       opacity:0;
    				     }
    				     .v-code .line {
    				       position: relative;
    				       width: 130px;
    				       height: 80px;
    				       line-height: 50px;
    				       text-align: center;
    				       font-size: 40px;
    				     }
    				     .v-code .line::after {
    				       display: block;
    				       position: absolute;
    				       content: '';
    				       left: 0;
    				       width: 100%;
    				       bottom: 0;
    				       height: 1px;
    				       background-color: #333333;
    				       transform: scaleY(.5);
    				       transform-origin: 0 100%;
    				     }
    				     .v-code .line.animated::before {
    				       display: block;
    				       position: absolute;
    				       left: 50%;
    				       top: 20%;
    				       width: 1px;
    				       height: 60%;
    				       content: '';
    				       background-color: #333333;
    				       animation-name: coruscate;
    				       animation-duration: 1s;
    				       animation-iteration-count: infinite;
    				       animation-fill-mode: both;
    				     }
    				     @keyframes coruscate {
    				       0% {
    				         opacity: 0
    				       }
    				       25% {
    				         opacity: 0
    				       }
    				       50% {
    				         opacity: 1
    				       }
    				       75% {
    				         opacity: 1
    				       }
    				       to {
    				         opacity: 0
    				       }
    				     }

js:

var app = new Vue({
    				el: '#code',
    				data: {
    					code: '',
    					codeLength: 4,
    					telDisabled: false,
    					focused: false
    				},
    				computed: {
    					codeArr() {
    						return this.code.split('')
    					},
    					cursorIndex() {
    						return this.code.length
    					}
    				},
    				watch: {
    					code(newVal) {
    						this.code = newVal.replace(/[^\d]/g, '')
    						if (newVal.length > 3) {
    							// this.telDisabled = true
    							this.$refs.vcode.blur()
    							setTimeout(() => {
    								alert(`vcode: ${this.code}`) ;
    							}, 500)
    						}
    					}
    				}, 
    			})

最后引用一下VUE的js

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTI4Njc0NA_size_16_color_FFFFFF_t_70]: /images/20221119/48b73eb58f2c467b8ca4bfc60b7da811.png