0 Compartilhamentos 3264 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 planejar e construir um projeto de programação
Artigos
31 visualizações
Artigos
31 visualizações

Como planejar e construir um projeto de programação

Carlos L. A. da Silva - 19 de abril de 2021

O desenvolvedor full stack Peter Lynch revela seu método de preparação para qualquer projeto, de forma simples e direta para iniciantes e veteranos.

15 ferramentas de desenvolvimento para melhorar sua produtividade em 2021 sem gastar nada
Artigos
165 visualizações
Artigos
165 visualizações

15 ferramentas de desenvolvimento para melhorar sua produtividade em 2021 sem gastar nada

Carlos L. A. da Silva - 2 de abril de 2021

O cenário de desenvolvimento está em constante mudança e muitas vezes uma ferramenta nova pode agilizar muito seu trabalho.

A tecnologia por trás do deep fake de Deep Nostalgia
Artigos
162 visualizações
Artigos
162 visualizações

A tecnologia por trás do deep fake de Deep Nostalgia

Carlos L. A. da Silva - 22 de março de 2021

Serviço do My Heritage permite "animar" fotos do passado, trazendo vida para seus antepassados. Como isso é possível?

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 se tornar um Engenheiro DevOps em 2021
Artigos
148 visualizações
148 visualizações

Como se tornar um Engenheiro DevOps em 2021

Carlos L. A. da Silva - 1 de março de 2021
Seus dados vazaram. E agora?
Artigos
128 visualizações
128 visualizações

Seus dados vazaram. E agora?

Carlos L. A. da Silva - 19 de fevereiro de 2021
Entendendo o elemento time em HTML 5
Artigos
145 visualizações
145 visualizações

Entendendo o elemento time em HTML 5

Carlos L. A. da Silva - 5 de fevereiro de 2021