纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

js短信验证码输入框 手动实现js短信验证码输入框

丶Serendipity丶   2021-06-07 我要评论
想了解手动实现js短信验证码输入框的相关内容吗丶Serendipity丶在本文为您仔细讲解js短信验证码输入框的相关知识和一些Code实例欢迎阅读和指正我们先划重点:js短信验证码输入框,js,验证码输入框下面大家一起来学习吧

前言

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

正文

  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>

总结


相关文章

猜您喜欢

  • Python内置模块 Python基础之内置模块详解

    想了解Python基础之内置模块详解的相关内容吗华青水上在本文为您仔细讲解Python内置模块的相关知识和一些Code实例欢迎阅读和指正我们先划重点:Python内置模块,python模块下面大家一起来学习吧..
  • Matplotlib绘制动态实时曲线 关于Matplotlib绘制动态实时曲线的方法改进指南

    想了解关于Matplotlib绘制动态实时曲线的方法改进指南的相关内容吗脑荼地在本文为您仔细讲解Matplotlib绘制动态实时曲线的相关知识和一些Code实例欢迎阅读和指正我们先划重点:matplotlib实时动态图,matplotlib动态绘图,matplotlib库下面大家一起来学习吧..

网友评论

Copyright 2020 www.fresh-weather.com 【世纪下载站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式