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

Quanto ganha um programador? Confira uma das maiores pesquisas salariais realizadas no Brasil
Notícias
5 visualizações
Notícias
5 visualizações

Quanto ganha um programador? Confira uma das maiores pesquisas salariais realizadas no Brasil

Redação - 23 de fevereiro de 2021

O Canal Código Fonte TV realizou uma pesquisa salarial com mais de 11 mil programadores brasileiros. Entre os dados coletados é possível analisar a média salarial por: tecnologia, idade, gênero, região, entre muitos outros insights.

Seus dados vazaram. E agora?
Artigos
9 visualizações
Artigos
9 visualizações

Seus dados vazaram. E agora?

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

Seus dados pessoais foram vazados e essa é uma verdade praticamente inevitável. A meta agora é minimizar os possíveis danos e cobrar autoridades.

Entendendo o elemento time em HTML 5
Artigos
15 visualizações
Artigos
15 visualizações

Entendendo o elemento time em HTML 5

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

O tempo não para, já dizia a canção. E o tempo também faz parte de um conjunto de tags HTML que podem ser muito úteis no seu projeto.

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 uma Resposta para Mauricio Cancelar resposta

Your email address will not be published.

Mais publicações

Como cortar texto sem usar uma linha de script
Dicas
21 visualizações
21 visualizações

Como cortar texto sem usar uma linha de script

Carlos L. A. da Silva - 11 de janeiro de 2021
Como começar a programar
Artigos
28 visualizações
28 visualizações

Como começar a programar

Carlos L. A. da Silva - 7 de janeiro de 2021
Como cancelar qualquer conta online para sempre
Dicas
30 visualizações
30 visualizações

Como cancelar qualquer conta online para sempre

Carlos L. A. da Silva - 30 de dezembro de 2020
Retrospectiva (positiva) de 2020
Artigos
33 visualizações
33 visualizações

Retrospectiva (positiva) de 2020

Carlos L. A. da Silva - 29 de dezembro de 2020