前言

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

正文

　　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. Day11_55_在Map集合中使用泛型

    在Map集合中使用泛型 ``` import java.util.HashMap; import java.util.Iterator; import java.util.Map; import ja ...

  2. kube-router代替kube-proxy+calico

    使用kubeadm安装kubernetes,并使用kube-router代替kube-proxy+calico网络. 即:kube-router providing service proxy, fi ...

  3. 一篇博文让你学会HTML5

    HTML 什么是HTML HTML(HyperText Markup Language,超文本标记语言)是用来描述网页的一种语言,它不是一种编程语言,而是一种标记语言. 认识HTML HTML5是构建 ...

  4. git 配置ssh

    git 配置ssh 生成一个个人账号/邮箱的sshkey ssh-keygen -t rsa -C "youremail@yourcompany.com" -f ~/.ssh/XX ...

  5. 针对中国政府机构的准APT攻击样本Power Shell的ShellCode分析

    本文链接网址:http://blog.csdn.net/qq1084283172/article/details/45690529 一.事件回放 网络管理员在服务器上通过网络监控软件检测到,有程序在不 ...

  6. LA2678最短子序列

    题意:       给你一个正整数序列,问你在里面找到一个最短的子序列,要求子序列的和大于等于k,输出序列长度. 思路:       这个序列的每个数字都是正整数,那么就比较好想了,我们可以直接枚举终 ...

  7. 机器视觉-EasyDL商品检测-标准版-Demo

    机器视觉-EasyDL商品检测-标准版 功能: EasyDL是百度大脑中的一个定制化训练和服务平台,EasyDL零售版是EasyDL针对零售场景推出的行业版,定制商品检测服务是EasyDL零售版的一项 ...

  8. selenium之利用cookie绕过验证登录

    方法一 第一步 2.第二步 方法二.重点:1.打开验证码页(登录页面):2.首次登录等待三十秒手工输入账密:3.保存cookie至excel后利用cookie脚本登录 1.导入第三方模块xlwt 2. ...

  9. 轻量级工具Vite到底牛在哪——一文全知道

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文参考:https://www.sitepoint.com/vitejs-front-end-build- ...

  10. springboot使用jwt进行权限验证

    springboot使用jwt进行权限验证 依赖准备 首先导入对应的依赖 <dependencies> <dependency> <groupId>org.apac ...