Verification Code - Pure HTML, CSS, JS

index.html

<div id="wrapper">
  <div class="verify-code">
    <input class="form-control code-1" tabindex="0" type="number" maxlength="1" size="1" min="0" max="9" />
    <input class="form-control code-2" tabindex="1" type="number" maxlength="1" size="1" min="0" max="9" />
    <input class="form-control code-3" tabindex="2" type="number" maxlength="1" size="1" min="0" max="9" />
    <input class="form-control code-4" tabindex="3" type="number" maxlength="1" size="1" min="0" max="9" />
  </div>
  <h1></h1>
</div>

script.js

var codes = new Array(4);
var re = /^\d+$/;
var inputs = [].slice.call(document.querySelectorAll('.verify-code input'));
inputs.map(function (input, index) {
  input.addEventListener('input', function (e) {
    this.value = this.value.slice(0, this.maxLength);
  });
  input.addEventListener('keyup', function (e) {
    if (re.test(input.value)) {
      codes[index] = input.value;
      var nextInput = inputs[index + 1];
      if (nextInput) {
        nextInput.focus();
        nextInput.select();
      } else {
        inputs[0].focus();
        inputs[0].select();
      }
    }

    document.querySelector('h1').innerHTML = codes.join('');
  });
  input.addEventListener('click', function (e) {
    e.target.select();
  });
});

style.css

#wrapper {
  margin: 0 auto;
  width: 260px;
}
input {
  width: 30px;
  padding: 10px;
  margin: 0 5px;
  border: 1px solid #ccc;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
input[type='number'] {
  -moz-appearance: textfield;
}

verification-code-pure-html-css-js.markdown

Verification Code - Pure HTML, CSS, JS

A Pen by Tin Tran on CodePen.

License.