Basta criar uma lista com todos os input
s que existem no seu formulário. Para isso, você pode usar:
const allFields = document.querySelectorAll('form input');
Então, eu faria assim:
const allFields = document.querySelectorAll('form input');
allFields.forEach((field, index) =>
field.addEventListener('input', (event) => {
const maxLength = parseInt(event.target.getAttribute('maxlength'), 10);
const nextField = allFields[index + 1];
// Três condições farão com que o próximo campo NÃO seja focado:
// 1. O atributo `maxLength` não estiver definido (se isso ocorrer, a
// variável `maxLength` será `NaN`); Ou:
// 2. O valor do campo tiver um tamanho diferente do `maxLength`; Ou:
// 3. Não existir um próximo elemento.
if (
Number.isNaN(maxLength) ||
event.target.value.length !== maxLength ||
!nextField
) {
return;
}
nextField.focus();
})
);
<form>
<div>
<input type="text" maxlength="5" />
</div>
<div>
<div>
<!-- Não há limites para o nível de aninhamento! -->
<input type="text" maxlength="3" />
</div>
</div>
<div>
<input type="text" />
</div>
</form>
Acho que acabou ficando um pouco mais simples também, já que eliminamos o uso do while
para achar o próximo elemento, enfatizando simplesmente no "formulário e seus campos". :)
O funcionamento do script acima é bem simples:
- Capturamos todos os
input
s que fazem parte do formulário (form
);
- Adicionamos um listener para o evento
input
a cada um dos campos;
- Quando um campo emite o evento
input
, fazemos as devidas verificações (explicadas no código);
- Encontramos o elemento acessando o próximo
input
da lista, através do índice da iteração (dentro do forEach
atual) somado a 1.
Nota sobre o evento input
É importante salientar que eu mudei o evento keyup
para o input
, pois penso que seja mais adequado nesse caso, uma vez que é emitido somente quando o valor do campo é alterado, diferentemente do keyup
, que emite ao pressionar qualquer tecla quando o elemento estiver focado.
Há um ganho na experiência do usuário com essa troca, pois, caso um dos campos já esteja com o limite de caracteres, caso estivesse ouvindo ao evento keyup
, o script passaria para o próximo campo mesmo que eu estivesse somente navegando pelo texto com, por exemplo, as setinhas do teclado, o que não é o comportamento mais amigável.