jquery实现一个一个输入的6位验证码，可回退删除
Posted lcy0111
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery实现一个一个输入的6位验证码，可回退删除相关的知识，希望对你有一定的参考价值。
要实现的效果如下
思路：
通过label，让input获取焦点，让手机系统谈出键盘，
监听键盘事件，keyup，获取输入的值，即键盘的key值
校验元素，仅数字，或数字+字母都可以（正则根据情况来，本文章限定的是字幕+数组）
当点击删除或者回退键，删除最后输入的元素，这里根据label的索引来判断
上代码：直接复制html内容，运行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title> </title>
<script type="text/javascript" src="http://www.daixiaorui.com/Public/js/jquery.min.js"></script>
<style>
@keyframes animate {
100% {
opacity: 0;
}
}
.container{
padding: 5%;
}
.vcode{
position: relative;
width: 100%;
overflow: hidden;
}
.code{
width: 100%;
padding: 0;
height: 0px;
font-size: 35px;
overflow: hidden;
border: none;
outline: none;
opacity: 0;
margin-left: -100%; /* ios上透明度为0时依然有光标 */
-webkit-tap-highlight-color: transparent;/*ios手机上input和lable都会出现点击有灰色背景闪动*/
}
/* 第一种样式 下划线 */
.labels{
display: flex;
display: -webkit-flex;
width: 100%;
height: 40px;
justify-content: space-between;
-webkit-justify-content: space-between;
margin-bottom: 40px;
-webkit-tap-highlight-color: transparent; /*防止ios手机上input和lable都会出现点击有灰色背景闪动*/
}
.label{
height: 34px;
line-height:34px;
width: 12%;
border-bottom: solid 2px #313131;
float: left;
color: #313131;
font-size: 20px;
text-align: center;
padding-bottom: 4px;
}
.labels2 .label{
height: 34px; line-height:34px;
width: 12%;
border: solid 1px #746f6f;
float: left;
color: #313131;
font-size: 20px;
text-align: center;
padding : 4px;
}
/* 模拟光标 */
.active:after{
content: ‘ ‘;
display: inline-block;
height: 100%;
width: 2px;
height:34px;
background: #ff8000;
animation: .8s animate linear infinite;
}
</style>
</head>
<body>
<div class="container">
<h2>输入验证码：</h2>
<div class="vcode" id=‘vertifycode‘>
<input type="text" maxlength=‘6‘ autofocus ref=‘code‘ class=‘code‘ id=‘code‘>
<!-- 第一种样式 底部横线 -->
<div class="labels">
<label class=‘label ‘ for="code"></label>
<label class=‘label‘ for="code"></label>
<label class=‘label‘ for="code"></label>
<label class=‘label‘ for="code"></label>
<label class=‘label‘ for="code"></label>
<label class=‘label‘ for="code"></label>
</div>
<!-- 第二种样式 方块 -->
<!-- <div class="labels labels2" >
<label class=‘label ‘ for="code"></label>
<label class=‘label‘ for="code"></label>
<label class=‘label‘ for="code"></label>
<label class=‘label‘ for="code"></label>
<label class=‘label‘ for="code"></label>
<label class=‘label‘ for="code"></label>
</div> -->
</div>
</body>
<script type="text/javascript">
$(function(){
// i 为label的索引下标
var i = 0;
$("#code").focus(function(){
if($(".labels .active").length==0){
$(".labels label:nth-child(1)").addClass("active");
}
})
$(‘input‘).keyup(function (event) {
var reg = /[A-Za-z0-9]/;
if(reg.test(event.key)){
$(".labels label").removeClass("active");
if(i<$(".labels label").length) {
//46删除键，8回退键
if(event.keyCode==46 || event.keyCode==8) {
i--;
i = i<0?0:i;
$("label:nth-child("+(i+1)+")").html("").addClass("active")
}else {
$("label:nth-child("+(i+1)+")").html(event.key)
$("label:nth-child("+(i+2)+")").addClass("active")
i++;
}
}else{
if(event.keyCode==46 || event.keyCode==8) {
i=$(".labels label").length-1;
$("label:nth-child("+(i+1)+")").html("").addClass("active")
}
}
}
})
});
</script>
</html>
-----参考原文：https://blog.csdn.net/dongguan_123/article/details/79961216------
以上是关于jquery实现一个一个输入的6位验证码，可回退删除的主要内容，如果未能解决你的问题，请参考以下文章
time-based基于google key生成6位验证码（google authenticator）
如何用jqueryEasyUi框架验证密码只能输入六位包含数字字母？