js实现多个小方格输入验证码，一格输入完成后自动聚焦到下一格

多读多写多记录，多学多练多思考。----------- 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 = 2txts[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 = 2txts[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;//时间多少svar timer = null;//setIntervalvar 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,就是这些了，如果有更简单或者更实用的方法，欢迎您来留言，我们共同讨论！！！希望能帮助到有需要的朋友！！！

js实现多个小方格输入验证码，一格输入完成后自动聚焦到下一格相关推荐

JS实现飞机大战小游戏超详细附源码和原图
目录效果展示源码 HTML CSS JS 原图效果展示 HTML+CSS+JS做打飞机小游戏开始界面选择你喜欢的飞机开始游戏按下空格键开始/暂停有三种敌机可以设置飞机生命值,生命值 ...
登陆shopee后台一直让输入验证码，登陆不上去
1.问题登陆shoepp后天,账号和密码都正确但是还的输入验证码,每次输入正确但是按确认后就让重新输入验证码(hongpeii.my),但是登陆别的账号正常gaifute.my zhonwang. ...
2020前端最新面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）（3年前端菜鸟级开发师含泪总结）
2020前端最新面试题总结(js.html.小程序.React.ES6.Vue.算法.全栈热门视频资源) 文档描述 (今年确实挺难 3年前端菜鸟级开发师含泪总结希望能帮助大家) 本文是关注微信小程序 ...
前端面试题总结（js、html、小程序、React、ES6、Vue、全栈）
前端面试题总结(js.html.小程序.React.ES6.Vue.全栈) 文档描述本文是关注微信小程序的开发和面试问题, 由基础到困难循序渐进, 适合面试和开发小程序. 并有热点框架(vue re ...
前端面试题总结（js、html、小程序、React、算法、vue 、全栈热门视频资源）
写在前面详细文档和答案请去看云平台查看购买一次购买终身免费长期更新(欢迎大家多题宝贵意见) 文档描述本文是关注微信小程序的开发和面试问题, 由基础到困难循序渐进, 适合面试和开发小程序. 并有热点 ...
小程序手机号验证码登录
这是我最近的一个项目--微信小程序实现手机号- -验证码登录,涉及到了提交参数时需要加密.加密所采用的方式也是按照要求,严格采用16位小加密的MD5的加密形式. login.wxml <vie ...
微信小程序发送验证码
记录一下,小程序发送验证码的小案例.废话不多说,直接撸代码... 1.效果图如下 wxml: <view class='header'> <input type='number' p ...
简单生成微信小程序随机验证码
废话不多说,直接上图看效果一.实现功能: 1.点击灰色底的验证码图片可以更换一张验证码 2.验证输入的验证码是否正确,并且输入小大写英文都可以. 二.核心代码: 注意:我是用uni-app框架写的, ...
微信小程序，验证码输入框
微信小程序,验证码输入效果预览写了个小程序验证码输入的小demo,用的方法是比较猥琐的隐藏input框,输入内容绑定的方法 wxml代码 <view class="wx-page- ...

js实现多个小方格输入验证码，一格输入完成后自动聚焦到下一格

js实现多个小方格输入验证码，一格输入完成后自动聚焦到下一格相关推荐

最新文章

热门文章