html手机验证码效果,JS如何实现手机端输入验证码效果

之前在“掘金”上看到这样一个demo 我觉得很有意思，于是今天把它搬下来，记在自己的“小本本”里

也许会对以后的项目有点用，若要自己去实现这样一个案例也能实现，但是可能没有那么“妙”。

想法：

1、使用label标签做显示验证码的框，

2、然后每个label for属性指向同一个 id 为vcode 的input，

3、为了能够触发input焦点， 将input 改透明度样式隐藏，

4、这样就实现了 点击label触发 input焦点，调用键盘。

运行效果：

示例代码：

结构部分html：

验证码:

ref="vcode"

id="vcode"

type="tel"

maxlength="6"

v-model="code"

@focus="focused = true"

@blur="focused = false"

:disabled="telDisabled">

for="vcode"

class="line"

v-for="item,index in codeLength"

:class="{'animated': focused && cursorIndex === index}"

v-text="codeArr[index]"

>

css部分：

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

background-color: #ffffff;

font-family: -apple-system, PingFang SC, Hiragino Sans GB, Helvetica Neue, Arial;

-webkit-tap-highlight-color: transparent;

}

.app {

padding-left: 20px;

padding-right: 20px;

padding-top: 60px;

max-width: 320px;

margin-left: auto;

margin-right: auto;

}

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

width: 280px;

margin-left: auto;

margin-right: auto;

}

.v-code input {

position: absolute;

top: 200%;

opacity:0;

}

.v-code .line {

position: relative;

width: 40px;

height: 32px;

line-height: 32px;

text-align: center;

font-size: 28px;

}

.v-code .line::after {

display: block;

position: absolute;

content: '';

left: 0;

width: 100%;

bottom: 0;

height: 1px;

background-color: #aaaaaa;

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

}

}

Javascript部分

1、通过CDN引入vue.js

2、代码

var app = new Vue({

el: '#app',

data: {

code: '',

codeLength: 6,

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 > 5) {

// this.telDisabled = true

this.$refs.vcode.blur()

setTimeout(() => {

alert(`vcode: ${this.code}`)

}, 500)

}

}

},

})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。