SMS verification code input box

index.html

<div id="app">
  <div class="check-div">
    <h1>Please enter the verification code</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>
</div>

script.js

var inputArr = document.getElementsByTagName("input");
window.addEventListener("keyup", (e) => {
  let curIndex = e.target.getAttribute("data-index"); //Get the index of the current input
  //If you click BackSpace to delete, delete all here
  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 the input is not a number
  if (!(e.keyCode >= 48 && e.keyCode <= 57)) {
    console.log(1111111111);
    inputArr[curIndex].value = "";
    return false;
  }
  //The value of the traversal array is spliced ​​into a verification code string
  var str = "";
  for (let j = 0; j <= 3; j++) {
    console.log(inputArr[j].value);
    str += inputArr[j].value;
  }
  
  var nextIndex = Number(curIndex) + 1;
  //When it is judged that there is not enough four-digit verification code
  if (curIndex <3 && str.length <4) {
    for (let i = 0; i <= curIndex; i++) {
      // Judge whether the previous one is free or there is no input, if it exists, adjust the focus to the front, and give the back of the input to the front one, otherwise skip to the next one
      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("The verification code submitted is" + str);
    //You can send a verification code request when you enter the four-digit verification code, etc.
  }
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.2/index.js"></script>

sms-verification-code-input-box.markdown

SMS verification code input box

A Pen by Edward Lance Lorilla on CodePen.

License.

style.css

.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;
  /* Here pay attention to modify the default outer border properties, without border*/
  outline: 1px solid black;
}
input:focus {
  outline: 2px solid #3494fe;
}

styles

<link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet" />