0 Compartilhamentos 926 Views 7 Comments

Máscara para telefones de 8 e 9 dígitos – jQuery

Nesse código irei apresentar uma forma bem simples de colocar, em apenas um campo input, a máscara para telefones ou celulares de 8 e 9 dígitos usando jQuery. E a verificação com o atributo pattern, que só é válido para HTML5.

Para utilização da máscara iremos usar um plugin em jQuery, o jQuery Mask Plugin. Existem outras opção de plugins com finalidades semelhantes, mas esse nos atendeu perfeitamente!

Para baixá-lo acesso: http://plugins.jquery.com/mask/

Através desde link você também terá acesso a toda documentação do plugin. Dessa forma você poderá implementar facilmente outros tipos de máscaras.

Após o download, abra o arquivo zip e localize o arquivo: jquery.mask.min.js. Descompacte apenas ele no diretório onde estão os demais arquivos .js de seu site.

Em seguida vá até o código da sua página e faça a inclusão dele, da mesma forma que é feito com os outros arquivos do mesmo formato.

Em nosso caso, que o arquivo está no diretório js, a chamada ficou assim:

Em seguida no campo input do telefone, colocaremos o seguinte código:

Agora vou explicar um pouco do que foi feito.
O atributo pattern da tag input é responsável por validar o que está sendo digitado e o padrão deve sempre ser definido através de uma expressão regular.

Na linha seguinte é apresentada a chamada em jQuery do .mask. O padrão utilizado permite a digitação de apenas números, sendo que os 0 são de digitação obrigatória e o 9 é opcional.

Dessa forma o padrão de máscara pode ser utilizando tanto para telefones fixos com DDD e 8 dígitos quanto para celulares com DDD e 8 ou 9 dígitos.

Espero ter ajudo e até a próxima!

Você pode se interessar

Manifesto Ágil: Retrospectivas Lúdicas
Artigos
7 visualizações
Artigos
7 visualizações

Manifesto Ágil: Retrospectivas Lúdicas

Plataformatec - 14 de janeiro de 2019

Há alguns anos, quando tive os meus primeiros contatos práticos com os métodos ágeis, conheci e participei pela primeira vez (como ouvinte) de um famoso evento do universo ágil: Retrospectivas. Após duas horas de reunião, entendi (equivocadamente, por sinal) que essa reunião tinha dois grandes objetivos: escutar as pessoas elogiando algumas características da última entrega do […]

Agile // Dicionário do Programador
Vídeos
1,655 compartilhamentos6,804 visualizações
Vídeos
1,655 compartilhamentos6,804 visualizações

Agile // Dicionário do Programador

Thais Cardoso de Mello - 14 de janeiro de 2019

Agile é o termo falado nesse Dicionário do Programador, conheça mais sobre o assunto.

Promoções de Jogos do Final de Semana (11/01)
Notícias
16 visualizações
Notícias
16 visualizações

Promoções de Jogos do Final de Semana (11/01)

Carlos L. A. da Silva - 11 de janeiro de 2019

Confira as melhores ofertas de jogos de PC para o final de semana.

7 Responses

  1. Estou há dias procurando uma forma simples e eficiente e não encontrava. Com essa ajuda posso fazer pra outras coisa na minha tabela. Muito obrigado!

    Resposta

Deixe um Comentário

Your email address will not be published.

Mais publicações

God of War: segredos dos bastidores do melhor jogo de 2018
Artigos
15 visualizações
15 visualizações

God of War: segredos dos bastidores do melhor jogo de 2018

Carlos L. A. da Silva - 11 de janeiro de 2019
As 5 Melhores Linguagens para 2019 // Vlog #86
Vídeos
1,655 compartilhamentos6,813 visualizações
1,655 compartilhamentos6,813 visualizações

As 5 Melhores Linguagens para 2019 // Vlog #86

Thais Cardoso de Mello - 10 de janeiro de 2019
Como acessar fotos curtidas por qualquer usuário no Facebook
Dicas
17 visualizações
17 visualizações

Como acessar fotos curtidas por qualquer usuário no Facebook

Carlos L. A. da Silva - 9 de janeiro de 2019
O que Isaac Asimov imaginou para 2019?
Artigos
22 visualizações
22 visualizações

O que Isaac Asimov imaginou para 2019?

Carlos L. A. da Silva - 8 de janeiro de 2019