[Resolvido] Autotab em Plugin Masked Input

[D2th3 3]

Amigos,

 

Coloquei um plugin do jQuery para fazer Máscaras nos Inputs (Masked Input plugin for jQuery). Agora estou tentando colocar um Autotab nesses inputs.

Como o Plugin aceita inserir uma programação no final da máscara eu inseri um código porém não está funcionando corrtamente.

 

jQuery(function($){
   $("#cpf").mask("999.999.999-99",{placeholder:" ",completed:function(){$('input[type="text"]:next').focus();}});
   $("#cep").mask("99999-999",{placeholder:" "});
   $("#telefone").mask("(99) 9999-9999",{placeholder:" "});
});

o evento que eu inseri:

function(){$('input[type="text"]:next').focus();}

Quando termino de preenchero o campo ele fica passando o foco para todos os campos intermitente.

 

Alguém poderria me dar uma idéia??

[Matheus Tavares 167]

Especifique melhor o seu input, amigo.

 

No momento em que você faz isso:

 

function(){
  $('input[type="text"]:next').focus();
}

Você está dizendo ao codigo que é para ele pegar TODOS os input do tipo texto, ir para o PROXIMO, e dar o foco ;)

 

Você teria que fazer algo assim:

 

function(){
  $('#id:next').focus();
}

ou assim:

 

function(){
  $('#id').next().focus();
}

Ah, outra coisa que você poderia fazer é utilizar outros seletores, como o eq(). Daí você pode selecionar o número exato do input que você quer, mas isso exigiria saber o número do anterior para então selecionar o posterior. ;)

 

Abraços!

[D2th3 3]

Valeu pela explicação. Como sou novo em jQuery ainda apanho com coisas simples que somente a experiência vai me lapidando.

 

Porém são funcionou conforme eu estou buscando.

 

Eu quero fazer um Autotab. Como é uma máscara, quando o usuário terminar de preencher não seria necessário ele passar para o próximo campo clicando no mouse ou apertando a tecla tab, dessa forma eu busco uma situação onde ao completar os dígitos da máscara ele automaticamente passa para o próximo Input.

 

Eu tenho uma função pronta no Javascript que faz isso, porém essa máscara do jQuery já preenche os caracteres então quando digito o primeiro caracter o Javascript entende que já digitei todos os caracteres desse campo e aplica o autotab, passando o cursos para o próximo campo.

 

Fiz de uma forma que funcionou, porém não seria totalmente funcional.

$("#cpf").mask("999.999.999-99",{placeholder:" ",completed:function(){$('input[name="proximo_input"]').focus();}});

O problema é que tenho sempre que editar o valor name do campo seguinde ao campo que estou digitando a máscara, isso torna a função com funcionalidade limitada. Se caso a função pegasse o próximo Input sem a necessidade de eu apontar para onde ela tem que ir seria melhor, pois ficaria adaptável a qualquer situação.

 

 

Obrigado. Se tiver alguma sugestão, eu ficarei agradecido.

[Matheus Tavares 167]

Bom amigo, você pode tentar pegar o valor do input ATUAL com indexOf ou eq, e depois mudar para o proximo com eq, e ainda de quebra fazer um if para verificar se o proximo existe, caso contrário manda um alert() perguntando de pode enviar o formulario ;).

 

Um exemplo:

 

$("#cpf").mask("999.999.999-99",{placeholder:" ",completed:function(){
  var indice = $(this).index() + parseFloat(1);
  $('input[type="text"]:eq(indice)').focus();
}});

Acho que isso resolve o seu caso, nao testei, mas a lógica é essa.

 

Abraços

[M. Simão 0]

Ressuscitanto o tópico, você conseguiu uma solução definitiva, D2th3?

 

Estou usando o Plugin Masked Input e me deparei com o mesmo problema.

 

Valeu!

[William Bruno 1501]

dá uma olhada aqui:

http://www.wbruno.com.br/blog/?p=42

 

fiz 2 soluções.. uma com o maskedinput e outra sem, usando máscaras com ER

[M. Simão 0]

Oi Bruno,

 

Realmente é muito interessante sua solução!

 

Estou com dúvida apenas em como configurar o "size" e o "maxlength". Você poderia me explicar melhor essa etapa? Pois em alguns campos não estou sabendo ajustar corretamente e assim não está acontecendo o autotab.

 

Valeu!

[William Bruno 1501]

o size tanto faz cara...

 

o maxlength, é a quantidade de caracteres do campo.

 

se você tiver um cep:

05570-060

 

coloque o maxlength para 9, pois são 8 digitos mais um traço, então 9 caracteres.

só vai funcionar corretamente em campos com mascara que tenham esse numero exato de caracteres.

 

mostra como você ta tentando, se não fica impossivel ajudar.

[M. Simão 0]

Olá Bruno,

 

Meu código está assim:

 

<script type='text/javascript'> 

$(document).ready(function(){
   var numero_cpf = $("input[name='numero_cpf']");
   var data_nascimento = $("input[name='data_nascimento']");
   var email = $("input[name='email']");
   var numero_cnpj = $("input[name='numero_cnpj']");
   var cep = $("input[name='cep']");
   var telefone_fixo = $("input[name='telefone_fixo']");
   var telefone_celular = $("input[name='telefone_celular']");
 
   $( numero_cpf ).mask('999.999.999-99');
   $( data_nascimento ).mask('99/99/9999');
   $( numero_cnpj ).mask('99.999.999/9999-99');
   $( cep ).mask('99999-999');
   $( telefone_fixo ).mask('(99) 9999-9999');
   $( telefone_celular ).mask('(99) 9999-9999');

   $("input[name='numero_cpf']").keyup(function(){
       next( $(this), data_nascimento );
   });

   $("input[name='data_nascimento']").keyup(function(){
       next( $(this), email );
   });

   $("input[name='cep']").keyup(function(){
       next( $(this), telefone_fixo );
   });

   $("input[name='telefone_fixo']").keyup(function(){
       next( $(this), telefone_celular );
   });

});

function next( el, next )
{
    var val = $( el ).val();
    var filtrado = val.replace(/[^a-zA-Z0-9]/g, '');// ER para remover tudo oque não for nem letra e nem número    
    var mask = val.match(/[-.]/g);// ER para saber quantos caracteres da máscara fazem parte da string final
 
    if( filtrado.length == $( el ).attr('maxLength')-mask.length )
        $( next ).focus();
}

</script>

O autotab não está funcionado de data_nascimento para email e de telefone_fixo para telefone_celular, o maxlenght dos dois telefontes está definido para 14 e o maxlenght da data_nascimento está definido para 10. Dei uma olhada e acho que pode ser por causa dos parênteses e da barra que a ER não trata, mas como sou muito fraco em ER, você poderia me dar essa força?

 

Valeu!

[M. Simão 0]

Para aqueles que também precisarem, consegui reconhecer barra, parênteses e espaços deixando a ER do William dessa forma:

 

val.match(/[-.\/\(\) ]/g)

 

William Bruno, muito obrigado mesmo pela força! Sua solução que quebrou um galho grande!

 

Valeu!