JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<input type="text">
</div>
<div>
<input type="text">
</div>
<div>
<input type="text">
</div>
<div>
<input type="text">
</div>
<button>mudar foco</button>
CSS
button {
position: fixed;
top: 0px;
padding: 10px;
}
div {
padding: 200px;
height: 300px;
background: #eee;
}
JavaScript
var inputs = $('input').get();
var current = 0;
$('button').on('click', function () {
current++;
if (current == inputs.length) current = 0;
inputs[current].focus();
});
$(inputs).on('focus', function () {
var pos = $(this).offset();
$(document).scrollTop(pos.top);
});