前言

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

正文

　　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. Scrapy的流程

    Scrapy框架的架构如下图 具体部分说明: Engine:引擎,处理整个系统的数据流处理,出发事物,是整个框架的核心 Item:项目.定义了爬取结果的数据结构,爬取的数据会被赋值成该Item对象 S ...

  2. zabbix容器化安装及监控docker应用

    一.zabbix agent2 介绍 从Zabbix 4.4之后,官方推出了Zabbix Agent 2,意味着zabbix 不在只是物理机监控的代名词,现在你可以使用Go为Zabbix编写插件,来监 ...

  3. 1028 List Sorting

    Excel can sort records according to any column. Now you are supposed to imitate this function. Input ...

  4. Laravel打印sql日志

    直接打印 use Log; use DB; DB::connection()->enableQueryLog(); Log::info(DB::getQueryLog()); //print_r ...

  5. OD调试程序常用断点大全

    常用断点  拦截窗口:  bp CreateWindow 创建窗口  bp CreateWindowEx(A) 创建窗口  bp ShowWindow 显示窗口  bp UpdateWindow 更新 ...

  6. 修改Android手机内核，绕过反调试

    本文博客链接:http://blog.csdn.net/qq1084283172/article/details/57086486 0x1.手机设备环境 Model number: Nexus 5 O ...

  7. 3.PHP条件语句及其字符串相关函数

    PHP条件语句 <?php    $number = rand(1,100);    if($number % 2 == 0){        echo "%2";    } ...

  8. CTFHub-技能树-信息泄露

    CTFHub-技能树-信息泄露 1.目录遍历 文件夹不多,直接手翻就行 2.PHPinfo 直接搜索ctfhub{就能找到 3.备份文件下载 3-1 网站源码 打开之后: 因为这里组合比较少可以手动测 ...

  9. 【JavaScript】Leetcode每日一题-移除元素

    [JavaScript]Leetcode每日一题-移除元素 [题目描述] 给你一个数组 nums 和一个值 val,你需要 原地 移除所有数值等于 val 的元素,并返回移除后数组的新长度. 不要使用 ...

  10. Rabbit MQ一些参数解释

    //ConnectionFactory(连接工厂): 生产Connection的的工厂 //Connection(连接):是RabbitMQ的socket的长链接,它封装了socket协议相关部分逻辑 ...