3

Tenho um formulário com diversos inputs, combos e etc.

Como posso fazer para que quando o usuário selecionar uma opção no combo o cursor já pule para o próximo campo do formulário?

Também fazer com que quando o usuário preencher um campo que tenha limite certo, ou seja, cpf, celular, cnpj... ao final já pule também para o próximo campo?

Não sei se ajuda ou influencia em algo, mas estou utilizando o laravel 5.1.

3 Respostas 3

2

O que procuras é chamar o focus de um elemento. Por exemplo:

var select = document.querySelector('select');
select.addEventListener('change', function() {
    var input = document.querySelector('input[name="' + this.value + '"]');
    if (input) input.focus();
});

jsFiddle: https://jsfiddle.net/wbnj0cc8/

Neste exemplo cada vez que o select mudar ele vai procurar um input com o nome que foi selecionado no select. Se encontrar coloca-o em foco.

Para casos em que tenhas um limite no input basta contar o tamanho da string no input e passar para o proximo input quando essa condição se verificar. Um exemplo seria:

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;
    for (var i = 0; i < els.length; i++) {
        if (match) {
            els[i].focus();
            break;
        }
        match = els[i] == el;
    }
}

jsFiddle: https://jsfiddle.net/ev20ohty/

2
  • 1
    show, tava aqui vendo qual resposta marcar como certa, pois cada um respondeu parte da pergunta. Como aqui vc editou e colocou a outra parte vai ser esse rs, vlw! Commented 5/02/2016 às 17:26
  • @RaylanSoares fico contente de ter ajudado.
    – Sergio
    Commented 5/02/2016 às 17:28
2

Traduzindo uma resposta do próprio StackOverflow:

Você precisará criar uma função onkeyup no javascript e contar o tamanho do valor que o usuário está passando. Nessa função, criará um if, passando as condições se o tamanho da string que o usuário estiver passando for igual ou exceder o tamanho máximo, você adicionará a função para dar um focus para o próximo campo.

Como ficaria o código:

    <input name="productkey1" type="text" id="productkey1" size="4" maxlength="5"/>
    <input name="productkey2" type="text" id="productkey2" size="4" maxlength="5"/> 

     $('#productkey1').keyup(function() {
         if(this.value.length == $(this).attr('maxlength')) {
             $('#productkey2').focus(); 
            }
        }); 

JSFiddle: http://jsfiddle.net/khbEL/

2
  • obrigado @JulyanoFelipe, funcionou sim, mas como o Sergio complementou a resposta dele eu a marquei como correta. Commented 5/02/2016 às 17:27
  • Beleza, valeu @RaylanSoares Commented 5/02/2016 às 17:28
1

Utilize, nos campos do formulário, o atributo tabindex, exemplo:

<input type="text" name="nome" tabindex="1">
<input type="text" name="cpf" tabindex="2">
<input type="text" name="RG" tabindex="3">

Funciona também para links:

<a href="google.com.br" tabindex="4">Google</a>

O Navegador vai seguir a sequência do TABINDEX

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 .