JSFiddle - React, Tailwind, and code Playground
HTML
<label>nome
<input name="nome" data-length="5" placeholder="5 caracteres" type="text">
</label>
<label>idade
<input name="idade" data-length="2" placeholder="2 caracteres" type="text">
</label>
<label>contribuinte
<input name="contribuinte" type="text">
</label>
JavaScript
var inputs = document.querySelectorAll('input');
[].forEach.call(inputs, function(el) {
if (el.dataset && el.dataset.length) {
var max = parseInt(el.dataset.length, 10);
el.addEventListener('keyup', function() {
if (this.value.length >= max) focusNext(this, inputs)
});
}
});
function focusNext(el, els) {
var match;
console.log(el)
for (var i = 0; i < els.length; i++) {
if (match) {
els[i].focus();
break;
}
match = els[i] == el;
}
};