4

Estou tentando ir para o próximo campo do formulário no entanto os INPUTS estão dentro de DIVS e não consigo fazer funcionar. Só funciona sem as DIVS, já tentei várias combinações no script e nada.

Script:

var container = document.getElementsByClassName("container")[0];
container.onkeyup = function(e) {
    var target = e.srcElement;
    var maxLength = parseInt(target.attributes["maxlength"].value, 10);
    var myLength = target.value.length;
    if (myLength >= maxLength) {
        var next = target;
        while (next = next.nextElementSibling) {
            if (next == null)
                break;
            if (next.tagName.toLowerCase() == "input") {
                next.focus();
                break;
            }
        }
    }
}

Formulário:

<form class="container">
    <div>
        <input type="text" maxlength="10" />
    </div>                              
    <div>
        <input type="text"  />
    </div>  
</form>
0

2 Respostas 2

6

Basta criar uma lista com todos os inputs 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:

  1. Capturamos todos os inputs que fazem parte do formulário (form);
  2. Adicionamos um listener para o evento input a cada um dos campos;
  3. Quando um campo emite o evento input, fazemos as devidas verificações (explicadas no código);
  4. 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.

1
  • 1
    Ótima solução, é limpa e funcionou perfeitamente, muito obrigado.
    – denis
    Commented 26/08/2019 às 14:18
1

Modifiquei a lógica, porém mantendo o mesmo princípio de navegar pela arvore DOM.

O código auto-foca sequencialmente todos input[type=text] dentro de um <form>, independente da profundidade hierárquica que os input[type=text] possam se encontrar dentro do <form>.

Para isso quando um input[type=text] alcançar o número máximo de caracteres, permitidos, digitado o código inicia a busca pelo próximo input[type=text] em seu nível hierárquico. Não encontrando o código vasculha por na mesma hierarquia e consequentemente buscando a ocorrência mais próxima de input[type=text].

Não encontrando o algorítimo passa para um nível hierárquico superior e refaz a busca pelo próximo input[type=text].

No caso eu aumentei um pouco a complexidade dos aninhamentos dentro do form segundo a sugestão do operador Luiz Felipe, dimini o maxlength para 5 na intenção de diminuir a digitação no teste, coloquei uns <div> e alguns <span>, adicionei um <div> sem um respectivo para testar uma possível falha no código e finalizei com um <div> fora do formulário que não deve participar da cadeia de auto-seleção.

var container = document.getElementsByClassName("container")[0];
container.onkeyup = function(e) {
    var target = e.srcElement;
    var maxLength = parseInt(target.attributes["maxlength"].value, 10);
    var myLength = target.value.length;
    if (myLength >= maxLength) {
       //Primeiro procura pelo próximo input[type=text] na mesma hierarquia do elemento que disparou o evento
       target = procurarInput(e.srcElement);       
       if (target != null) return target.focus();

       //Depois procura pelo próximo input[type=text] numa hierarquia superior a do elemento que disparou o evento           
       var aux = e.srcElement;
       while(aux.parentNode.nodeName.toLowerCase() != "form"){             
           aux = aux.parentNode;               
           target = procurarInput(aux);
           if (target != null) return target.focus();
       } 
   }
}

//Essa função procura pelo primeiro irmão input[type=text] subsequente a //target ou pela primeira ocorrencia de um input[type=text] aninhado
// em um div subsequente a target 
function procurarInput(target){
  var result = null;
   //Procura pelos irmãos subsequentes a target do tipo input[type=text] e div
   $(target).nextAll("input[type=text], div").each((i,elem)=>{    
        // Verifica se é um  input[type=text]  
        if (elem.nodeName.toLowerCase() == "input") {
          //Se é um input[type=text] o coloca em result e abandona o each
          result = elem; 
          return false
        }
        //Se não é um input[type=text] é um div então procura em
        //seus descendente pela primeira ocorrencia de um input[type=text]
        var alt = $(elem).find("input[type=text]:first");
        //Verifica se achou algum candidato
        if (alt.length > 0) {
          //Se achou o coloca em result e abandona o each
          result = alt;
          return false;
        }
   });
   return result  //retorna o resultado da busca.
}
<form class="container">
    <div>
        <span>input1</span>
        <input type="text" maxlength="5" />
        <input type="text" maxlength="5" />
    </div>                              
    <input type="text" maxlength="5" />
    <div>
        <span>input2</span>
        <input type="text" maxlength="5" />
        <div>
           <span>input2.5</span>
           <input type="text" maxlength="5" />
              <div>
                <span>input2.75</span>
                <input type="text" maxlength="5" />
             </div> 
        </div> 
    </div>  
    <div>
        <span>input3</span>
        <input type="text" maxlength="5" />
    </div>  
    <div>
        <span>input5</span>
        <input type="text" maxlength="5" />
    </div>  
    <div>
        <span>um div sem input</span>
    </div>
</form>

<div>
   <!-- Esse input não deve ser auto-selecionado, pois etá fora do formulário -->
   <span>input fora do formulário não recebe o auto-foco</span>
   <input type="text" maxlength="5" />
</div>  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="script.js"></script>  

4
  • 1
    E se o input estiver dentro de uma div, aninhada a outra div? Commented 23/08/2019 às 22:26
  • 1
    @LuizFelipe, e estava pensando nisso.A hora que chegar em casa eu atualizo o código Commented 23/08/2019 às 22:35
  • @LuizFelipe código atualizado. Commented 24/08/2019 às 9:52
  • 1
    Seu código também funciona, pena que ficou um tanto extenso, mesmo assim muito obrigado.
    – denis
    Commented 26/08/2019 às 14:18

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .