手動(dòng)實(shí)現(xiàn)js短信驗(yàn)證碼輸入框

更新時(shí)間：2021年06月07日 09:28:25 作者：丶Serendipity丶

本文記錄一下自己手動(dòng)實(shí)現(xiàn)的一個(gè)前端常見的短信驗(yàn)證碼輸入組件，從需求到實(shí)現(xiàn)逐步優(yōu)化的過程。具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

前言

　　本文記錄一下自己手動(dòng)實(shí)現(xiàn)的一個(gè)前端常見的短信驗(yàn)證碼輸入組件，從需求到實(shí)現(xiàn)逐步優(yōu)化的過程。

正文

　　1.需求分析

　　首先看一下效果圖。

　　首先頁(yè)面加載的時(shí)候，輸入框獲取焦點(diǎn)，當(dāng)用戶輸入一個(gè)數(shù)字后，焦點(diǎn)自動(dòng)跳轉(zhuǎn)到第二個(gè)框，當(dāng)四個(gè)框全部輸入后，模擬發(fā)送提交請(qǐng)求，這里用一個(gè)彈框提示，輸出輸入的驗(yàn)證碼內(nèi)容。主流程之外的需求: 輸入框內(nèi)只能輸入數(shù)字類型，不能輸入字母，若強(qiáng)制輸入非數(shù)字類型按下撤回鍵時(shí)候輸入的驗(yàn)證碼置空并且把當(dāng)前焦點(diǎn)跳轉(zhuǎn)至第一個(gè)輸入框。

　　2.完整代碼實(shí)現(xiàn)。

　　大致思路就是頁(yè)面加載的時(shí)候，給第一個(gè)輸入框添加 autofocus 屬性，讓其自動(dòng)獲取焦點(diǎn)，然后監(jiān)聽鍵盤點(diǎn)擊事件，當(dāng)鍵盤按下的時(shí)候，判斷當(dāng)前按鍵是否是數(shù)字按鍵，若不是，則當(dāng)前輸入框置空，焦點(diǎn)還在當(dāng)前輸入框，若為數(shù)字，則判斷前面的輸入框是否有數(shù)字存在，若不存在，則把焦點(diǎn)跳轉(zhuǎn)到前面空的一個(gè)輸入框，否則當(dāng)前輸入框輸入，并且焦點(diǎn)移至下一個(gè)輸入框，焦點(diǎn)通過輸入框的一個(gè)偽類實(shí)現(xiàn)，當(dāng)輸入長(zhǎng)度為為4時(shí)候，將每個(gè)輸入框數(shù)字拼接成字符串通過彈框提示。

<!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;
        /* 這里注意修改默認(rèn)外邊框?qū)傩?不用border*/
        outline: 1px solid black;
      }
      input:focus {
        outline: 2px solid #3494fe;
      }
    </style>
  </head>
  <body>
    <div class="check-div">
      <h1>請(qǐng)輸入驗(yàn)證碼</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"); //獲取當(dāng)前輸入的下標(biāo)
        //如果點(diǎn)擊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);
        //如果輸入的不是數(shù)字
        if (!(e.keyCode >= 48 && e.keyCode <= 57)) {
          console.log(1111111111);
          inputArr[curIndex].value = "";
          return false;
        }
        //遍歷數(shù)組的值拼接成驗(yàn)證碼字符串
        var str = "";
        for (let j = 0; j <= 3; j++) {
          console.log(inputArr[j].value);
          str += inputArr[j].value;
        }

        var nextIndex = Number(curIndex) + 1;
        //判斷沒有屬夠四位驗(yàn)證碼的時(shí)候
        if (curIndex < 3 && str.length < 4) {
          for (let i = 0; i <= curIndex; i++) {
            // 判斷之前的是否有空即沒輸入的情況，存在則把焦點(diǎn)調(diào)整到前面，并且把輸入的后面給到最前面的一位，否則跳到下一位
            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("提交的驗(yàn)證碼是" + str);
          //輸入了四位驗(yàn)證碼的時(shí)候可以發(fā)送驗(yàn)證碼請(qǐng)求等等
        }
      });
    </script>
  </body>
</html>