0 Compartilhamentos 1601 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

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

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

Carlos L. A. da Silva - 17 de janeiro de 2020

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

Dez habilidades essenciais para desenvolvedores em 2020
Artigos
9 visualizações
Artigos
9 visualizações

Dez habilidades essenciais para desenvolvedores em 2020

Carlos L. A. da Silva - 16 de janeiro de 2020

Amplie e aperfeiçoe seu arsenal de conhecimento com essas competências fundamentais.

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

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

Carlos L. A. da Silva - 10 de janeiro de 2020

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

Mais publicações

A IA do Google derrubou o câncer de mama? Não exatamente
Artigos
19 visualizações
19 visualizações

A IA do Google derrubou o câncer de mama? Não exatamente

Carlos L. A. da Silva - 10 de janeiro de 2020
Mudanças no YouTube para conteúdo infantil já estão valendo
Notícias
19 visualizações
19 visualizações

Mudanças no YouTube para conteúdo infantil já estão valendo

Carlos L. A. da Silva - 7 de janeiro de 2020
Frameworks de servidor HTTP para Dart
Artigos
32 visualizações
32 visualizações

Frameworks de servidor HTTP para Dart

Carlos L. A. da Silva - 6 de janeiro de 2020
Promoções de Jogos do Final de Semana (03/01)
Notícias
21 visualizações
21 visualizações

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

Carlos L. A. da Silva - 3 de janeiro de 2020