Tab automático com jQuery
Salve! Salve! pessoal. Mais um post com uma dica bacana de jQuery!
Esta técnica é útil para acelerar o processo de digitação de campos com valor fixo em formulários. Telefone por exemplo.
Neste mini tutorial eu mostro como os seletores jQuery são poderosos e práticos.
O XHTML
Pra começar o XHTML da página do formulário. É um código bem simples. Mas quem não estiver familiarizado com XHTML é só deixar comentado que respondo!
Basicamente este código monta uma página com 3 campos de texto para o DDD, o prefixo e o número do telefone.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="pt-BR"> <head> <title>Tab automático com jQuery</title> <script type="text/javascript" src="jquery-1.2.6.min.js"></script> <script type="text/javascript"> [...código javascript comentado abaixo...] </script> </head> <body> <form method="post" action="autotab.htm"> <fieldset> <label for="ddd">DDD</label> <input type="text" class="autotab" name="ddd" id="ddd" maxlength="2" size="2" tabindex="1" /> <label for="prefixo">Prefixo</label> <input type="text" class="autotab" name="prefixo" id="prefixo" maxlength="4" size="4" tabindex="2" /> <label for="numero">Número</label> <input type="text" class="autotab" name="numero" id="numero" maxlength="4" size="4" tabindex="3" /> </fieldset> </form> </body> </html>
Agora o código javascript
1 2 3 4 5 6 7 8 9 10 11 | $(document).ready(function() { $(".autotab").keyup( function (event) { if ((event.which >= 48 && event.which <= 57) || (event.which >= 96 && event.which <= 105)) { if ($(this).val().length == $(this).attr('maxlength')) { var tabindex = $(this).attr('tabindex'); tabindex++; $('input[tabindex=' + tabindex + ']').focus(); } } }); }); |
Na linha 1 do javascript, criamos a função que executa o script apenas após o carregamento completo do DOM.
Na linha 2 criamos uma função que será executada no eventro keyup, ou seja, sempre que se pressionar (e soltar) uma tecla. Aí está um dos “pulos do gato” da jQuery, os seletores!
Usando $(’.autotab’) selecionamos todos elementos que tiverem a classe autotab atribuída. Esta classe foi atribuída aos elementos input type=”text”
Na linha 3 verificamos se foi pressionada uma tecla numérica 0 a 9.
Na linha 4 verificamos se a quantidade de caracteres digitados - $(this).val().length - no campo é igual ao atributo maxlength - $(this).attr(’maxlength’) - do elemento.
Nas linhas de 5 a 7, caso satisfaça a condição, muda o foco para o próximo elemento na sequencia de tabindex usando o seletor [attribute=value] - $(’input[tabindex=' + tabindex + ']‘).focus();
Este post não foi muito didático, mas o lema da jQuery é esse mesmo, Write Less, Do More, ou, Escreva menos e faça mais :), portanto, quaisquer dúvidas responderei (ou tentarei responder) através dos comentários.
Clique aqui para ver o exemplo em funcionamento!
É isso aí pessoal! Exemplo simples mas que pode ser muito útil em nossos projetos!
Ao som de O Rappa - Monstro invisível, Forte Abraço! Até o próximo post!
Tags: formulários, jQuery
16 de março de 2009 às 12:47 pm
Muito bom este codigo para tab automaitca…
Mas tivi um problema quando fui usa-lo junto com um o jquery maskedinput.js ( que é usado pra estilizar os dados dos campos do formulário).
Achei que seria interessante usar a autotab jundo com a mascara se alguem conseguir fazer funcionar poste ai pra gente a solução..
vou tentar aqui qualquer evolução eu aviso..
O codigo da mascara que usei foi este.
jQuery(function($){
$(”#telefone”).mask(”9999-9999″);
$(”#celular”).mask(”9999-9999″);
$(”#fone_amigo”).mask(”9999-9999″);
$(”#ddd”).mask(”(99)”);
$(”#dddcel”).mask(”(99)”);
$(”#ddd_amigo”).mask(”(99)”);
});
22 de abril de 2009 às 10:31 am
Olá, estou pesquisando na net uma mascara para IPs que funcione 100%, mas não achei nenhuma … se por acaso tiver alguma ideia … de como fazer a mesma … agradeço!
23 de abril de 2009 às 10:45 am
Olá Rafael. Eu uso este plugin para máscaras http://digitalbush.com/projects/masked-input-plugin/
Qualquer dúvida entre em contato!
Agora meus artigos sobre jQuery estão no http://www.juliobitencourt.com
Abraço!
13 de dezembro de 2009 às 7:24 pm
Djalma, o seu problema é resolvido se você fazer o seguinte:
// autotab
$(’#ds_cpf’).autotab({ target: $(’#ds_endereco’), format: ‘all’ });
// máscara
$(”#ds_cpf”).mask(”999.999.999-99″,{placeholder:”"});
O segredo está no placeholder!
Abraço!