手动实现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短信验证码输入框的文章就介绍到这了,更多相关js短信验证码输入框内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
JS验证input输入框（字母，数字，符号，中文）
只能输入英文 <input type="text" onkeyup="value=value.replace(/[^a-zA-Z]/g,'')"> 只能输入英文 <input type="text" onkeyup="value=value.replace(/[^\a-\z\A-\Z]/g,'')" onkeydown="fncKeyStop(event)" onpaste="r
-
JavaScript 输入框内容格式验证代码
代码 复制代码 代码如下: <body> 用户名:<input type="text" id="name" /> <div id="d" style="display:none; background:#999900;"></div> //验证结果显示,注意display是隐藏的 <br /> 密码: <input type="text" i
-
手动实现js短信验证码输入框
前言 本文记录一下自己手动实现的一个前端常见的短信验证码输入组件,从需求到实现逐步优化的过程. 正文 1.需求分析 首先看一下效果图. 首先页面加载的时候,输入框获取焦点,当用户输入一个数字后,焦点自动跳转到第二个框,当四个框全部输入后,模拟发送提交请求,这里用一个弹框提示,输出输入的验证码内容.主流程之外的需求: 输入框内只能输入数字类型,不能输入字母,若强制输入非数字类型按下撤回键时候输入的验证码置空并且把当前焦点跳转至第一个输入框. 2.完整代码实现. 大致思路就是页面加载的时候,给第一个
-
vue实现短信验证码输入框
本文实例为大家分享了vue实现短信验证码输入框的具体代码,供大家参考,具体内容如下 先上最终效果 (此处代码显示的是短信验证码框的效果 其余部分并未放上去) html <div class="code"> <input id="first" class="inputStyle" v-model="code[0]" style="border-top-left-radius: 12px; bord
-
JS短信验证码倒计时功能的实现（没有验证码，只有倒计时）
1.功能描述 当用户想要获取验证码时,就点击 免费获取验证码 ,然后开始倒计时,倒计时期间按钮文字为剩余时间x秒,且不可按状态,倒计时结束后,按钮更改为点击重新发送. 2.分析 必须用到定时器.按钮点击后,在定时器内做出判断.倒计时60秒,到0结束. 3.代码实现: 重点介绍:定时器在进行下一次倒计时之前,一定要清除一下,这样的话保证下一次定时器倒计时是正常的. <!DOCTYPE html> <html> <head> <meta charset="U
-
Android实现短信验证码输入框
本文实例为大家分享了Android实现短信验证码输入框的具体代码,供大家参考,具体内容如下 其实用官方自定的那个inputEditText默认带下划线的,然后自己再实行焦点和输入框弹出等操作也可以. 写这个自定义View主要是为了练习. /** * 实现了粘贴事件监听回调的 EditText */ open class ListenPasteEditTextTest : AppCompatEditText { constructor(context: Context): super(contex
-
Vue.js实现移动端短信验证码功能
现在的短信验证码一般为4位或6位,则页面中会相应的显示4个或6个文本框,如图所示 当点击注册进入到输入验证码页面的时候,第一个框自动获取光标,依次输入,不可直接输入第三个或第四个框的值, input输入框是循环出来的,代码如下: <div class="sms_input"> <div v-for="n in sms.numbers-1"><input v-if="sms.show[n-1]" disabled=&q
-
JS实现用户注册时获取短信验证码和倒计时功能
在用户注册时,通常需要短信验证码,而且为了交互效果,也需要增加倒计时. 效果如下: <div class="user-form"> <form action="{{ path('zm_member_register') }}" method="post"> <div class="form-list"> <label class="register-label"&g
-
js验证手机号、密码、短信验证码代码工具类
本文实例为大家分享了js验证手机号.密码.短信验证码的代码工具类,供大家参考,具体内容如下 代码工具类 /** * 参数较验 * * */ var verification = { stop : false, //倒计时 //验证手机号 phone : function (tel, id) { if ("" == tel || !tel) { mui.toast('手机号不可以为空!'); } else { var reg = /^0?1[3|4|5|7|8][0-9]\d{8}$/;
-
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新，页面关闭不进行倒计时功能)
相关阅读: 基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭) 下面一段代码是小编给大家带来的js发送短信验证码后实现倒计时功能,代码简单易懂. 具体代码如下所示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus
-
JS获取短信验证码倒计时的实现代码
废话不多说了,直接给大家贴代码了,具体代码如下所示: $(function() { var phone_num = /^1\d{10}$/; var flag = 1; //短信发送时标志位 $(".getcode").click(function() { if($("#phone").val() == "") { alert("请输入电话号码!"); return false; }; if(!phone_num.test($
-
JS实现简单短信验证码界面
1.要实现短信验证码界面,首先要有一个文本框,旁边是按钮,点击时开始倒计时. 2.先创建文本框和按钮,按钮设置对应的id,然后在js中通过id获取按钮这个元素,对其执行操作.同时应设置倒计时时间以及计时器变量,并使点击发送按钮后倒计时结束前无法继续点击按钮重新发送. 3.倒计时结束后,清除计时器,并使文字改变为"重新发送验证码",恢复对按钮能操作的功能,同时使倒计时的数从5秒重新开始以便点击后重新倒计时. <head> <meta charset="UTF-