前言

　　本文记录一下自己手动实现的一个前端常见的短信验证码输入组件，从需求到实现逐步优化的过程。

正文

　　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--手动实现一个常见的短信验证码输入框的更多相关文章

  1. 云平台短信验证码通知短信java/php/.net开发实现

    一.本文目的 大部分平台都有一个接入发送短信验证码.通知短信的需求.虽然市场上大部分平台的接口都只是一个非常普通的HTTP-GET请求,但终归有需要学习和借鉴使用的朋友. 本文的初衷是主要提供学习便利 ...

  2. js模拟支付宝发送短信验证码&&&&短信倒计时

    html <div class="pwdContent"> <div class="pwdBox"></div> <d ...

  3. 利用java实现的一个发送手机短信的小例子

    今天闲来无事,在微博上看到一个关于用java实现的一个发送手机短信的程序,看了看,写的不太相信,闲的没事,把他整理下来,以后可能用得着 JAVA发送手机短信,流传有几种方法:(1)使用webservi ...

  4. 短信验证码js实现

    短信验证码实现 我们在使用移动.电信等运营商网上营业厅的时候,为确保业务的完整和正确性,经常会需要用到短信的验证码.最近因为某省业务需要,也做了个类似的功能. 原理很简单,就是在用户点击"获 ...

  5. js短信验证码

    短信验证码,无注释,url顺便写的错的,所以会报错 <!DOCTYPE html> <html> <head> <meta charset="UTF ...

  6. android开发学习---开发一个简易的短信发送器

    一.需求: 开发一个简易的短信发送器,输入:对方手机号码,短信内容,点击发送按钮,短信发送成功,对方手机成功收到短信. 其中要求短信内容过长时可以自动拆分,长度英文是160个英文,中文是70个,中英混 ...

  7. js 发送短信验证码倒计时

    html <input type="button" id="btn" value="免费获取验证码" onclick="se ...

  8. JS异步操作之promise发送短信验证码.html

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta cont ...

  9. 一百一十八：CMS系统之短信验证码加密和js代码混淆

    前面的方法存在安全隐患,只要知道发送短信验证码的接口就可以无限触发发送短信验证码 改用post请求,在前端加scrf_token验证,后面需要使用到md5加密,引入md5 from apps.form ...

随机推荐

  1. Vue和Node.js交互之token

    博主最近工作的时候,公司后台使用的JAVA,在做登陆时总会传来一个token然后我存在了本地存储中或Vuex中,之后每一次请求把它带在请求头上,然后就好奇想要自己做一个后台服务器然后做一个完整的登陆的 ...

  2. Jenkins 分布式和并发构建

    1. 分布式构建 1.1 添加 linux 节点 1.2 添加 windows 节点 2. 并发构建 2.1 原理 2.2 示例:分别用 chrome/IE/Firefox 并行测试 1. 分布式构建 ...

  3. 记一次 .NET 某教育系统API 异常崩溃分析

    一:背景 1. 讲故事 这篇文章起源于 搬砖队大佬 的精彩文章 WinDBg定位asp.net mvc项目异常崩溃源码位置 ,写的非常好,不过美中不足的是通览全文之后,总觉得有那么一点不过瘾,就是没有 ...

  4. PAT归纳总结——关于C++输入输出格式问题的一些总结

    自从使用了C++就不再想使用C语言来刷题了,C++便捷的输入输出方式,以及一些STL库函数的使用都要比使用C语言方便的多.但是使用的时候还有一些需要注意的地方,在这篇博客中写一下.(更好的教程可以参看 ...

  5. 漫画 | 公司测试因提Bug不规范，锒铛入狱～

    互联网人罪状系列 1.上班第一天,前端把后端告上县衙,还列了 5 宗罪 2. 程序员状告产品经理八大罪状 (上) 3.程序员状告产品经理八大罪状(下) 开发人员与测试人员的关系,就如同程序员与产品经理 ...

  6. python 利用opencv去除图片水印

    python 去除水印"人工"智能去除水印 这两天公司来了一个新的需求--去除水印,对于我一个从未接触过的这种事情的人来说,当时我是蒙的.不过首先我就去搜索了一下是否有该种合适的功 ...

  7. Windows Server中企业证书服务的安装

    目录 企业证书服务的安装 证书服务的应用 企业证书服务的安装 企业证书服务是基于域的,所以需要该服务器是域控服务器. 添加角色,勾选 Active Directory 证书服务 然后后面的一直下一步, ...

  8. Java中的结构语句

    目录 循环语句 While循环 do...While循环 for循环 增强型for语句 条件语句 if..else语句 if...else if...else 语句 嵌套的 if-else 语句 sw ...

  9. Ubuntu部署项目

    一.Ubuntu目录结构 目录 说明 bin 存放二进制可执行文件(ls,cat,mkdir等) .exe== boot 存放用于系统引导时使用的各种文件 开机引导 dev 用于存放设备文件 打印机啥 ...

  10. Elasticsearch入门，看这一篇就够了

    目录 前言 可视化工具 kibana kibana 的安装 kibana 配置 kibana 的启动 Elasticsearch 入门操作 操作 index 创建 index 索引别名有什么用 删除索 ...