JSFiddle - React, Tailwind, and code Playground
HTML
<div class="tax">
<input type="text" maxlength="1" />
<input type="text" maxlength="4" />
<input type="text" maxlength="5" />
<input type="text" maxlength="2" />
<input type="text" maxlength="1" />
</div>
CSS
input[type="text"] {
width: 30px;
float:left;
}
JavaScript
$(function () {
$('.tax input[type="text"]').keypress(function (e) {
if (e.which == 0 || e.charCode == 0) {
return true;
}
var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);
str = $(this).val() + str;
if (str.length == $(this).prop('maxlength')) {
console.log($(this).prop('maxlength'));
var that = this;
window.setTimeout(function(){
$(that).next('input[type="text"]').focus();
}, 0);
}
});
});