介绍 & lt; div id=癮pp"类=癮pp"比;
& lt; h3类=癶eading-2"祝辞验证码:& lt;/h3>
& lt; div类=皏-code"祝辞
& lt;输入
ref=皏code"
id=皏code"
类型=皌el"
最大长度=?”;
v模型=癱ode"
@focus=白ㄗ?true"
@blur=白ㄗ?false"
:禁用=皌elDisabled"比;
& lt;标签
为=皏code"
类=發ine"
v代表=跋?在codeLength"指数;
:类=皗& # 39;动画# 39;:集中,,cursorIndex===指数}“;
v-text=癱odeArr(指数)“;
比;
& lt;/label>
& lt;/div>
& lt;/div> & lt; style>
* {
保证金:0;
填充:0;
box-sizing: border-box;
}
身体{
background - color: # ffffff;
字体类型:苹果系统,巴航SC, Hiragino Sans GB, Helvetica Neue, Arial;
-webkit-tap-highlight-color:透明;
}
.app {
padding-left: 20 px;
padding-right: 20 px;
padding-top: 60 px;
max-width: 320 px;
margin-left:汽车;
margin-right:汽车;
}
.heading-2 {
颜色:# 333333;
}
.v-code {
margin-top: 20 px;
显示:-webkit-box;
显示:-ms-flexbox;
显示:flex;
-webkit-box-pack:证明;
-ms-flex-pack:证明;
justify-content:之间的空间;
-webkit-box-align:中心;
-ms-flex-align:中心;
对齐项目:中心;
位置:相对;
宽度:280 px;
margin-left:汽车;
margin-right:汽车;
}
.v-code输入{
位置:绝对的;
上图:200%;
透明度:0;
}
.v-code .line {
位置:相对;
宽度:40像素;
高度:32像素;
行高:32像素;
text-align:中心;
字体大小:28 px;
}
{后.v-code .line::
显示:块;
位置:绝对的;
内容:& # 39;& # 39;;
左:0;
宽度:100%;
底部:0;
身高:1 px;
background - color: # aaaaaa;
变换:写入scaleY (5);
transform-origin: 0 100%;
}
.v-code .line。动画:{之前
显示:块;
位置:绝对的;
左:50%;
上图:20%;
宽度:1 px;
高度:60%;
内容:& # 39;& # 39;;
background - color: # 333333;
animation-name:焕发;
动画:1;
animation-iteration-count:无限;
animation-fill-mode:;
}
@keyframes焕发{
0% {
透明度:0
}
25% {
透明度:0
}
50% {
透明度:1
}
75% {
透明度:1
}
, {
透明度:0
}
}
& lt;/style>
这篇文章主要讲解了JS实现手机端输入验证码的方法,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。
想法:
1,使用标签标签做显示验证码的框,
2,然后每个标签属性指向同一个id为vcode的输入,
3,为了能够触发焦的输入点,将输入改透明度样式隐藏,
4,这样就实现了点击标签触发焦的输入点,调用键盘。
运行效果:
示例代码:
结构部分html:
css部分:
Javascript部分
1,通过CDN引入vue.js
& lt;脚本https://www.yisu.com/zixun/src=" https://cdn.bootcss.com/vue/2.5.16/vue.min.js ">
2代码
应用var=new Vue ({
艾尔:& # 39;#应用# 39;
数据:{
代码:& # 39;& # 39;
codeLength: 6,
telDisabled:假的,
重点:假
}，
计算:{
codeArr () {
返回this.code.split (& # 39; & # 39;)
}，
cursorIndex () {
返回this.code.length
}
}，
看:{
代码(newVal) {
这一点。代码=newVal.replace (/^ \ [d]/g, & # 39; & # 39;)
如果(newVal。长度比;5){//这个。telDisabled=true
refs.vcode.blur美元。()
setTimeout(()=比;{
alert (' vcode: $ {this.code} ')
},500)
}
}
}，
}) 看完上述内容,是不是对JS实现手机端输入验证码的方法有进一步的了解,如果还想学习更多内容,欢迎关注行业资讯频道。
