本文详细记录了一个前端短信验证码输入组件的手动实现过程。从需求分析入手，涵盖自动聚焦、单数字输入限制、焦点自动跳转及提交验证等核心功能。通过监听键盘事件与DOM操作，实现了四位验证码的完整交互逻辑，并提供了完整的HTML/CSS/JS代码示例供开发者参考。
前言
本文旨在记录一个前端常见功能的开发过程：手动构建短信验证码输入组件。文章将展示从最初的需求梳理到最终代码实现的完整优化路径。
正文
1. 需求分析
首先参考效果图。
页面加载时，输入框需自动获取焦点。用户每输入一个数字，焦点应自动跳转至下一个输入框。当四个输入框全部填完后，模拟发送提交请求，此处通过弹窗提示并输出输入的验证码内容。此外，还需处理非主流程的需求：输入框仅允许接收数字，禁止输入字母。若用户强制输入非数字字符并按下退格键，当前验证码内容需清空，且焦点应重置跳转至第一个输入框。
2. 完整代码实现。
实现思路如下：页面加载时，为第一个输入框添加 autofocus 属性以实现自动聚焦。接着监听键盘按下事件，判断按键是否为数字。若非数字，则清空当前输入框内容并保持焦点在当前框；若是数字，则检查前一个输入框是否已有内容。若前框为空，则将焦点跳转至前一个空输入框；否则，在当前框输入数字并将焦点移至下一个输入框。焦点样式通过伪类实现。当输入长度达到4位时，将各框数字拼接为字符串，通过弹窗提示结果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.check-div {
width: 400px;
height: 600px;
margin: 100px auto;
border: 1px solid slategrey;
text-align: center;
}
h1 {
font-size: 24px;
}
.input-div {
margin-top: 100px;
}
input {
margin-left: 5px;
text-align: center;
width: 50px;
height: 50px;
border: none;
/* 这里注意修改默认外边框属性,不用border*/
outline: 1px solid black;
}
input:focus {
outline: 2px solid #3494fe;
}
</style>
</head>
<body>
<div class="check-div">
<h1>请输入验证码</h1>
<div class="input-div">
<input
type="text"
class="inputItem0"
data-index="0"
maxlength="1"
autofocus
/>
<input type="text" class="inputItem1" data-index="1" maxlength="1" />
<input type="text" class="inputItem2" data-index="2" maxlength="1" />
<input type="text" class="inputItem3" data-index="3" maxlength="1" />
</div>
</div>
<script>
var inputArr = document.getElementsByTagName("input");
window.addEventListener("keyup", (e) => {
let curIndex = e.target.getAttribute("data-index"); //获取当前输入的下标
//如果点击BackSpace删除 这里删除全部
if (e && e.keyCode == 8) {
console.log(22222222222);
for (let j = 0; j <= 3; j++) {
inputArr[j].value = "";
inputArr[0].focus();
}
return;
}
console.log("e.keyCode", e.keyCode);
//如果输入的不是数字
if (!(e.keyCode >= 48 && e.keyCode <= 57)) {
console.log(1111111111);
inputArr[curIndex].value = "";
return false;
}
//遍历数组的值拼接成验证码字符串
var str = "";
for (let j = 0; j <= 3; j++) {
console.log(inputArr[j].value);
str += inputArr[j].value;
}
var nextIndex = Number(curIndex) + 1;
//判断没有属够四位验证码的时候
if (curIndex < 3 && str.length < 4) {
for (let i = 0; i <= curIndex; i++) {
// 判断之前的是否有空即没输入的情况，存在则把焦点调整到前面，并且把输入的后面给到最前面的一位，否则跳到下一位
if (!inputArr[i].value) {
inputArr[curIndex].blur();
inputArr[i].value = inputArr[curIndex].value;
var index = i + 1;
inputArr[index].focus();
inputArr[curIndex].value = "";
return;
} else {
var nextIndex = Number(curIndex) + 1;
inputArr[nextIndex].focus();
}
}
} else {
alert("提交的验证码是" + str);
//输入了四位验证码的时候可以发送验证码请求等等
}
});
</script>
</body>
</html>总结
至此，关于手动实现JS短信验证码输入框的介绍结束。如需了解更多相关技术内容，请查阅本站往期文章或继续浏览后续内容，感谢大家的支持！