本文详细介绍使用JavaScript实现四位或六位验证码输入框自动切换功能，包括代码示例及样式设置，适用于短信验证码等场景。
多读多写多记录，多学多练多思考。----------- Grapefruit.Banuit Gang(香柚帮)
js实现输入四位或者六位验证码，四个或者六个的小方格样式的需要多个input框，四位就是四个input，六位就是六个input，下面开始上代码：
<div class="code_box" onclick="code_focus()">
<input class="code-num" type="tel" maxlength="1">
<input class="code-num" type="tel" maxlength="1">
<input class="code-num" type="tel" maxlength="1">
<input class="code-num" type="tel" maxlength="1">
</div>
//注：同一个类名，maxlengh限制长度最多输入一位
样式是我这边需要的，可以根据需求随意更改
.code_box {
width: 60%;
height: 42px;
margin-top: 30px;
display: flex;
justify-content: space-between;
}
.code_box input {
width: 20%;
height: 40px;
text-align: center;
font-size: 20px;
outline: none;
border: 1px solid #AAA;
}
最后用js来实现就ok了：
//封装方法：
function goNextInput(el) {
var delCount = 2;//用来判断删除时是第一次点击还是第二次
var txts = document.querySelectorAll(el);
for (var i = 0; i < txts.length; i++) {
var t = txts[i];
t.index = i;
t.setAttribute("readonly", true);
t.onkeyup = function () {
this.value = this.value.replace(/^(.).*$/, '$1');
var next = this.index + 1;
// 最后一个输入框
if (next == txts.length) {
if (this.value) {
delCount = 1//有值的时候把delCount变成1
} else {
if (delCount < 2) {
delCount++
} else {
if (next - 2 >= 0) {
txts[next - 2].removeAttribute("readonly");
txts[next - 2].focus();
txts[next - 2].value = '';
txts[next - 1].setAttribute("readonly", true);
delCount = 1
}
}
}
}
if (next > txts.length - 1) return;
txts[next].removeAttribute("readonly");
if (this.value) {
delCount = 2
txts[next].focus();
txts[next - 1].setAttribute("readonly", true);
}
else {
if (next - 2 >= 0) {
txts[next - 2].removeAttribute("readonly");
txts[next - 1].setAttribute("readonly", true);
txts[next - 2].focus();
txts[next - 2].value = '';
delCount = 1
}
}
}
}
txts[0].removeAttribute("readonly");
}
//调用该方法：
goNextInput('.code-num');
如果输入的时候你点击了其他的地方导致input失去焦点了，那么你再点击的时候，不管点击哪一个盒子，聚焦的都要是最后一个有值的后面那个盒子，如果输入到第四个盒子的时候不管有没有值都要聚焦第四个
// 点击code输入框，判断谁聚焦
function code_focus() {
var txts = document.querySelectorAll('.code-num');
for (var i = 0; i < txts.length; i++) {
var t = txts[i];
t.index = i;
if (txts[0].value != '') {
if (txts[1].value != '') {
if (txts[2].value != '') {
if (txts[3].value != '') {
txts[3].focus();
} else {
txts[3].focus();
}
} else {
txts[2].focus();
}
} else {
txts[1].focus();
}
} else {
txts[0].focus();
}
}
}
这样就ok了，这个是跟点击获取验证码倒计时六十秒配合使用的，如果有需要的朋友可以去参考一些柚子的另一篇博客《vue自定义获取验证码组件，倒计时60秒》，当然这篇博客是柚子写vue项目的时候写的，下面我也用原生js实现了一次，也可以参考一下，下面附上所有代码：
<body>
<div class="code">
<p class="title">短信验证码</p>
<div class="codes">
<div class="code_box" onclick="code_focus()">
<input class="code-num" type="tel" maxlength="1">
<input class="code-num" type="tel" maxlength="1">
<input class="code-num" type="tel" maxlength="1">
<input class="code-num" type="tel" maxlength="1">
</div>
<div id="btn" class="btn" onclick="getCode()">获取验证码</div>
</div>
</div>
//自定义吐司提示
<div class="toast_box">
<p id="toast"></p>
</div>
</body>
//不要忘记style是在head里面的
<style>
.code {
width: 100%;
box-sizing: border-box;
padding: 10px 30px;
margin-top: 20px;
position: relative;
}
.codes {
width: 100%;
display: flex;
justify-content: space-between;
position: relative;
}
.code_box {
width: 60%;
height: 42px;
margin-top: 30px;
display: flex;
justify-content: space-between;
}
.code_box input {
width: 20%;
height: 40px;
text-align: center;
font-size: 20px;
outline: none;
border: 1px solid #AAA;
}
.code .btn {
width: 35%;
height: 30px;
text-align: center;
line-height: 30px;
border: 1px solid #CCC;
background: #FFF;
border-radius: 5px;
color: #AAA;
font-size: 14px;
position: absolute;
bottom: 0;
right: 0;
}
//吐司的样式
@keyframes show {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes hide {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.toast_box {
width: 100%;
position: absolute;
bottom: 50px;
justify-content: center;
display: none;
}
.toast_box p {
box-sizing: border-box;
padding: 10px 20px;
max-width: 72%;
width: max-content;
background: #000;
color: #FFF;
font-size: 16px;
text-align: center;
border-radius: 6px;
opacity: 0.8;
}
</style>
<script>//可以放到body里面
// input框输入1位数字后自动跳到下一个input聚焦
function goNextInput(el) {
var delCount = 2;
var txts = document.querySelectorAll(el);
for (var i = 0; i < txts.length; i++) {
var t = txts[i];
t.index = i;
t.setAttribute("readonly", true);
t.onkeyup = function () {
this.value = this.value.replace(/^(.).*$/, '$1');
var next = this.index + 1;
// 最后一个输入框
if (next == txts.length) {
if (this.value) {
delCount = 1
} else {
if (delCount < 2) {
delCount++
} else {
if (next - 2 >= 0) {
txts[next - 2].removeAttribute("readonly");
txts[next - 2].focus();
txts[next - 2].value = '';
txts[next - 1].setAttribute("readonly", true);
delCount = 1
}
}
}
}
if (next > txts.length - 1) return;
txts[next].removeAttribute("readonly");
if (this.value) {
delCount = 2
txts[next].focus();
txts[next - 1].setAttribute("readonly", true);
}
else {
if (next - 2 >= 0) {
txts[next - 2].removeAttribute("readonly");
txts[next - 1].setAttribute("readonly", true);
txts[next - 2].focus();
txts[next - 2].value = '';
delCount = 1
}
}
}
}
txts[0].removeAttribute("readonly");
}
goNextInput('.code-num');
// 获取验证码
function getCode() {
var mobile_reg = /^1[3456789]\d{9}$/;//手机正则
var mobile = document.getElementById('mobile').value//获取输入的手机号码
var count;//时间多少s
var timer = null;//setInterval
var btn_txt = document.getElementById('btn');//按钮文字
if (mobile == '') {
toast('手机号码不能为空', 3000);
} else if (!mobile_reg.test(mobile)) {
toast('手机号码格式不正确', 3000);
} else {
if (btn_txt.innerHTML == '获取验证码') {
btn_txt.style.border = '1px solid #07C4DD'
btn_txt.style.color = '#07C4DD'
btn_txt.innerHTML = '60s后重新获取'
const num = 60;
if (!timer) {
count = num;
timer = setInterval(() => {
if (count > 0 && count <= num) {
count--;
btn_txt.innerHTML = count + 's后重新获取'
} else {
clearInterval(timer);
timer = null;
btn_txt.innerHTML = '获取验证码'
btn_txt.style.border = '1px solid #CCC'
btn_txt.style.color = '#AAAAAA'
}
}, 1000);
}
}
}
}
// 自定义吐司
function toast(text, time) {
var toast = document.getElementById('toast');
var toast_box = document.getElementsByClassName('toast_box')[0];
toast.innerHTML = text;
toast_box.style.animation = 'show 1.5s'
toast_box.style.display = 'flex';
setTimeout(() => {
toast_box.style.animation = 'hide 1.5s'
setTimeout(() => {
toast_box.style.display = 'none';
}, 1400)
}, time)
}
// 点击code输入框，判断谁聚焦
function code_focus() {
var txts = document.querySelectorAll('.code-num');
for (var i = 0; i < txts.length; i++) {
var t = txts[i];
t.index = i;
if (txts[0].value != '') {
if (txts[1].value != '') {
if (txts[2].value != '') {
if (txts[3].value != '') {
txts[3].focus();
} else {
txts[3].focus();
}
} else {
txts[2].focus();
}
} else {
txts[1].focus();
}
} else {
txts[0].focus();
}
}
}
</script>
ok,就是这些了，如果有更简单或者更实用的方法，欢迎您来留言，我们共同讨论！！！希望能帮助到有需要的朋友！！！
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
