前言

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

正文

　　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. Day16_90_通过反射机制获取某个特定的构造方法

    通过反射机制获取某个特定的构造方法 public class ReflectTest13 { public static void main(String[] args) throws ClassNo ...

  2. 面试有关TCP常问的几个问题

    在面试中网络问题是一定会考察的,而TCP协议则是考察网络知识的重点.经常会被问道的问题如下: 请讲一下TCP协议建立连接的过程 请介绍TCP协议中的三次握手和四次挥手是怎么样的 为什么TCP协议要三次 ...

  3. 以 DEBUG 方式深入理解线程的底层运行原理

    说到线程的底层运行原理,想必各位也应该知道我们今天不可避免的要讲到 JVM 了.其实大家明白了 Java 的运行时数据区域,也就明白了线程的底层原理,不过把这些东西明明白白写在纸面上的,网络上的文章并 ...

  4. Mybatis（一）Porxy动态代理和sql解析替换

    JDK常用核心原理 概述 在 Mybatis 中,常用的作用就是讲数据库中的表的字段映射为对象的属性,在进入Mybatis之前,原生的 JDBC 有几个步骤:导入 JDBC 驱动包,通过 Driver ...

  5. 基于MATLAB的手写公式识别(7)

    今天晚上通过对原有T4模型的修改实现: 1.可以识别真彩图形.(这基本是一样大的,通过这个了解图像分割的原理) 2.在识别心脑管血药类的基础上实现数字的识别.(了解图像识别原理,熟练掌握图像分割技术) ...

  6. ECMAScript 2019(ES10)新特性简介

    简介 ES10是ECMA协会在2019年6月发行的一个版本,因为是ECMAScript的第十个版本,所以也称为ES10. 今天我们讲解一下ES10的新特性. ES10引入了2大特性和4个小的特性,我们 ...

  7. 01- Java概述

    一 Java简介 java语言发展史 发展史简单了解:如下: https://www.jianshu.com/p/a78fcb3ccf63 java语言平台 JavaSE(标准版):可以用户开发普通桌 ...

  8. Google字体API使用简单示例

    一.前面的话 Google总会做些造福大众的事情,例如提供了web在线字体的API,这玩意其实去年就有了,但是字体种类手指头+脚趾头就可以数出来.but 最近,貌似Google对字体API进行了升级, ...

  9. Typora+PicGo+cos图床打造开发者文档神器

    一.Typora简介 markdown简单.高效的语法,被每一个开发者所喜爱.Typora又是一款简约.强悍的实时渲染markdown编辑器.本文将介绍Typora搭配PicGo与腾讯cos对象存储( ...

  10. [源码分析] 并行分布式任务队列 Celery 之 Timer & Heartbeat

    [源码分析] 并行分布式任务队列 Celery 之 Timer & Heartbeat 目录 [源码分析] 并行分布式任务队列 Celery 之 Timer & Heartbeat 0 ...