0 Compartilhamentos 2358 Views 8 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!

Carregando...

Você pode se interessar

Como desativar temporariamente sua conta do Facebook
Dicas
17 visualizações
Dicas
17 visualizações

Como desativar temporariamente sua conta do Facebook

Carlos L. A. da Silva - 19 de setembro de 2020

Preparado para um "detox" da rede social? O Facebook permite que você suspenda sua conta sem precisar apagá-la permanentemente.

Promoções de Jogos do Final de Semana (18/09)
Notícias
12 visualizações
Notícias
12 visualizações

Promoções de Jogos do Final de Semana (18/09)

Carlos L. A. da Silva - 18 de setembro de 2020

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

O que você precisa saber sobre o Pix
Artigos
21 visualizações
Artigos
21 visualizações

O que você precisa saber sobre o Pix

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

Será o fim de DOCs, TEDs e transferências? Novo modelo de pagamento eletrônico proposto pelo Banco Central está prestes a entrar em funcionamento.

8 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
  2. Muito importante nesse caso, também adicionar o autocomplete=”tel-national”.

    Pois alguns navegadores podem colocar 55 no lugar do DDD e deixar o número incompleto, o tel-national remove a informação de país dos números de telefone!

    Resposta

Deixe um Comentário

Your email address will not be published.

Mais publicações

Como centralizar no CSS de forma definitiva
Dicas
21 visualizações
21 visualizações

Como centralizar no CSS de forma definitiva

Carlos L. A. da Silva - 12 de setembro de 2020
Promoções de Jogos do Final de Semana (11/09)
Notícias
25 visualizações
25 visualizações

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

Carlos L. A. da Silva - 11 de setembro de 2020
Esse artigo foi escrito por um robô
Artigos
22 visualizações
22 visualizações

Esse artigo foi escrito por um robô

Carlos L. A. da Silva - 9 de setembro de 2020
Home Booth? Você quase trabalhou em um desses…
Artigos
33 visualizações
33 visualizações

Home Booth? Você quase trabalhou em um desses…

Carlos L. A. da Silva - 5 de setembro de 2020