要实现的效果如下
思路：
通过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位验证码，可回退删除
原文地址：https://www.cnblogs.com/lcy0111/p/10168465.html