JSFiddle - React, Tailwind, and code Playground

by Emre Saracoglu

HTML

<form action="" role="form" method="post" id="passForm">
  <input type="text" class="passInput" name="pass[]" maxLength="1" size="1" autocomplete="off" min="0" max="9" required pattern="\d{1}" autofocus>
  <input type="text" class="passInput" name="pass[]" maxLength="1" size="1" autocomplete="off" min="0" max="9" required pattern="\d{1}">
  <input type="text" class="passInput" name="pass[]" maxLength="1" size="1" autocomplete="off" min="0" max="9" required pattern="\d{1}">
  <input type="text" class="passInput" name="pass[]" maxLength="1" size="1" autocomplete="off" min="0" max="9" required pattern="\d{1}">
  <input type="text" class="passInput" name="pass[]" maxLength="1" size="1" autocomplete="off" min="0" max="9" required pattern="\d{1}">
  <input type="text" class="passInput" name="pass[]" maxLength="1" size="1" autocomplete="off" min="0" max="9" pattern="\d{1}">
  <button type="submit" class="btn btn-lg btn-primary">SUBMIT</button>
</form>

JavaScript

var $inp = $(".passInput");

$inp.on({
  input: function(ev) {
    if (this.value) {
      $inp.eq($inp.index(this) + 1).focus();
    }
  },
  keydown: function(ev) {
    var i = $inp.index(this);
    if (ev.which === 8 && !this.value && i) {
      $inp.eq(i - 1).focus();
    }
  }
});