前言

　　本文記錄一下自己手動實現的一個前端常見的簡訊驗證碼輸入元件，從需求到實現逐步優化的過程。

正文

　　1.需求分析

　　首先看一下效果圖。

　　首先頁面載入的時候，輸入框獲取焦點，當用戶輸入一個數字後，焦點自動跳轉到第二個框，當四個框全部輸入後，模擬傳送提交請求，這裡用一個彈框提示，輸出輸入的驗證碼內容。主流程之外的需求: 輸入框內只能輸入數字型別，不能輸入字母，若強制輸入非數字型別按下撤回鍵時候輸入的驗證碼置空並且把當前焦點跳轉至第一個輸入框。

　　2.完整程式碼實現。

　　大致思路就是頁面載入的時候，給第一個輸入框新增 autofocus 屬性，讓其自動獲取焦點，然後監聽鍵盤點選事件，當鍵盤按下的時候，判斷當前按鍵是否是數字按鍵，若不是，則當前輸入框置空，焦點還在當前輸入框，若為數字，則判斷前面的輸入框是否有數字存在，若不存在，則把焦點跳轉到前面空的一個輸入框，否則當前輸入框輸入，並且焦點移至下一個輸入框，焦點通過輸入框的一個偽類實現，當輸入長度為為4時候，將每個輸入框數字拼接成字串通過彈框提示。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.     <style>
  9.       .check-div {
  10.         width: 400px;
  11.         height: 600px;
  12.         margin: 100px auto;
  13.         border: 1px solid slategrey;
  14.         text-align: center;
  15.       }
  16.       h1 {
  17.         font-size: 24px;
  18.       }
  19.       .input-div {
  20.         margin-top: 100px;
  21.       }
  22.       input {
  23.         margin-left: 5px;
  24.         text-align: center;
  25.         width: 50px;
  26.         height: 50px;
  27.         border: none;
  28.         /* 這裡注意修改預設外邊框屬性,不用border*/
  29.         outline: 1px solid black;
  30.       }
  31.       input:focus {
  32.         outline: 2px solid #3494fe;
  33.       }
  34.     </style>
  35.   </head>
  36.   <body>
  37.     <div class="check-div">
  38.       <h1>請輸入驗證碼</h1>
  39.       <div class="input-div">
  40.         <input
  41.           type="text"
  42.           class="inputItem0"
  43.           data-index="0"
  44.           maxlength="1"
  45.           autofocus
  46.         />
  47.         <input type="text" class="inputItem1" data-index="1" maxlength="1" />
  48.         <input type="text" class="inputItem2" data-index="2" maxlength="1" />
  49.         <input type="text" class="inputItem3" data-index="3" maxlength="1" />
  50.       </div>
  51.     </div>
  52.     <script>
  53.       var inputArr = document.getElementsByTagName("input");
  54.       window.addEventListener("keyup", (e) => {
  55.         let curIndex = e.target.getAttribute("data-index"); //獲取當前輸入的下標
  56.         //如果點選BackSpace刪除 這裡刪除全部
  57.         if (e && e.keyCode == 8) {
  58.           console.log(22222222222);
  59.           for (let j = 0; j <= 3; j++) {
  60.             inputArr[j].value = "";
  61.             inputArr[0].focus();
  62.           }
  63.           return;
  64.         }
  65.         console.log("e.keyCode", e.keyCode);
  66.         //如果輸入的不是數字
  67.         if (!(e.keyCode >= 48 && e.keyCode <= 57)) {
  68.           console.log(1111111111);
  69.           inputArr[curIndex].value = "";
  70.           return false;
  71.         }
  72.         //遍歷陣列的值拼接成驗證碼字串
  73.         var str = "";
  74.         for (let j = 0; j <= 3; j++) {
  75.           console.log(inputArr[j].value);
  76.           str += inputArr[j].value;
  77.         }
  78.  
  79.         var nextIndex = Number(curIndex) + 1;
  80.         //判斷沒有屬夠四位驗證碼的時候
  81.         if (curIndex < 3 && str.length < 4) {
  82.           for (let i = 0; i <= curIndex; i++) {
  83.             // 判斷之前的是否有空即沒輸入的情況，存在則把焦點調整到前面，並且把輸入的後面給到最前面的一位，否則跳到下一位
  84.             if (!inputArr[i].value) {
  85.               inputArr[curIndex].blur();
  86.               inputArr[i].value = inputArr[curIndex].value;
  87.               var index = i + 1;
  88.               inputArr[index].focus();
  89.               inputArr[curIndex].value = "";
  90.               return;
  91.             } else {
  92.               var nextIndex = Number(curIndex) + 1;
  93.               inputArr[nextIndex].focus();
  94.             }
  95.           }
  96.         } else {
  97.           alert("提交的驗證碼是" + str);
  98.           //輸入了四位驗證碼的時候可以傳送驗證碼請求等等
  99.         }
  100.       });
  101.     </script>
  102.   </body>
  103. </html>

總結

　　以上就是本文的全部內容，希望給讀者帶來些許的幫助和進步，方便的話點個關注，小白的成長踩坑之路會持續更新一些工作中常見的問題和技術點。