JSFiddle - React, Tailwind, and code Playground

by Mahadevan Sivasubramanian

HTML

<input type="text" id="mytext1" class="Number" maxlength="1" placeholder="0" />
<input type="text" maxlength="1" class="Number" placeholder="0" />
<input type="text" maxlength="1" class="Number" placeholder="0" />
<input type="text" maxlength="1" class="Number" placeholder="0" />
<input type="text" maxlength="1" class="Number" placeholder="0" />
<input type="text" maxlength="1" class="Number" placeholder="0" />
<input type="text" maxlength="1" class="Number" placeholder="0" />
<input type="text" maxlength="1" class="Number" placeholder="0" />
<input type="text" maxlength="1" class="Number" placeholder="0" />
<input type="text" maxlength="1" class="Number" placeholder="0" />

CSS

.Number {
  width: 3%;
  border: 0;
  border-bottom: 1px solid #000;
  background-color: none;
  outline: none;
  text-align:center;
}

JavaScript

document.getElementById("mytext1").focus();
    $("input").bind("input", function() {
        var $this = $(this);
        setTimeout(function() {
            if ( $this.val().length >= parseInt($this.attr("maxlength"),10) )
                $this.next("input").focus();
            
        },0);
    });