前言

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

正文

　　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. .NET6 平台系列2 .NET Framework框架详解

    系列目录     [已更新最新开发文章,点击查看详细] 什么是 .NET Framework? .NET Framework 是 Windows 的托管执行环境,可为其运行的应用提供各种服务. 它包括 ...

  2. pickle json模块

    pickle --- Python 对象序列化 通过pickle模块的序列化操作我们能够将程序中运行的对象信息保存到文件中去,永久存储. 通过pickle模块的反序列化操作,我们能够从文件中创建上一次 ...

  3. LinearDiscriminantAnalysis参数、属性和方法

    [LDA]线性判别分析 参数: solver:一个字符串,指定了求解最优化问题的算法,可以为如下的值. 'svd':奇异值分解.对于有大规模特征的数据,推荐用这种算法. 'lsqr':最小平方差,可以 ...

  4. 概A第一章测试

    ·  问题 1√ 得 10 分,满分 10 分       A与B不能同时发生,表明A与B互不相容.               ·  问题 2× 得 10 分,满分 10 分       A与B互逆 ...

  5. 1019 General Palindromic Number

    A number that will be the same when it is written forwards or backwards is known as a Palindromic Nu ...

  6. hdu1572 水搜索

    题意: 中文的不解释; 思路:           其实就是一个水的搜索,直接搜索不会超时,还有别跑最短路了,题目没要求跑最短路,别读错题,刚开始自己嘚嗖的跑了一边最短路 wa了 ,正好最近看了STL ...

  7. 路由器逆向分析------在Linux上安装IDA Pro

    本文博客地址:http://blog.csdn.net/qq1084283172/article/details/69665905 01.在Linux系统上安装Linux版本的IDA Pro Linu ...

  8. POJ 2516 基础费用流

    题意       有n个顾客,m个供应商,k种货物,给你顾客对于每种货物的要求个数,和供应商对于每种货物的现有量,以及供应每种货物的时候供应商和顾客之间的运输单价,问你满足所有顾客的前提下的最小运输费 ...

  9. 缓冲区溢出之栈溢出利用（手动编写无 payload 的 Exploit）

    0x01 介绍 Exploit 的英文意思就是利用,它在黑客眼里就是漏洞利用.有漏洞不一定就有Exploit(利用),有Exploit就肯定有漏洞.编写缓冲区溢出的Exploit分为3个方面:漏洞溢出 ...

  10. TLS实现代码段加密

    刚开始见到这个思路是看到周大师用这个东西做的免杀,当时感觉这个想法很好,但是由于当时对PE结构了解的少,看到二进制的东西就打怵,所以当时也没能成功的去实现这个思路,只是简单的记录了一下TLS的特性,直 ...