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

As melhores extensões gratuitas para Visual Studio 2022
Artigos
63 visualizações
Artigos
63 visualizações

As melhores extensões gratuitas para Visual Studio 2022

Carlos L. A. da Silva - 20 de janeiro de 2022

Comece o ano com a melhor ferramenta para complementar seu trabalho!

Conhecendo Svelte
Artigos
252 visualizações
Artigos
252 visualizações

Conhecendo Svelte

Carlos L. A. da Silva - 6 de janeiro de 2022

Svelte, React ou Vue? O especialista Josh Collinsworth disserta sobre a solução em seus mínimos detalhes.

Petrobras abre concurso com 757 vagas de nível superior
Artigos
308 visualizações
Artigos
308 visualizações

Petrobras abre concurso com 757 vagas de nível superior

Redação - 30 de dezembro de 2021

Há vagas para cientistas de dados, engenheiros e analistas de sistemas entre outras carreiras. As inscrições permanecerão abertas até o dia 05 de janeiro de 2022.

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

A história da imagem mais antiga da internet
Artigos
346 visualizações
346 visualizações

A história da imagem mais antiga da internet

Carlos L. A. da Silva - 28 de dezembro de 2021
Coreia do Sul no mapa dos jogos
Artigos
345 visualizações
345 visualizações

Coreia do Sul no mapa dos jogos

Carlos L. A. da Silva - 22 de dezembro de 2021
Rust é o futuro da infraestrutura JavaScript
Artigos
640 visualizações
640 visualizações

Rust é o futuro da infraestrutura JavaScript

Carlos L. A. da Silva - 6 de dezembro de 2021
Influenciadores digitais que não existem
Artigos
625 visualizações
625 visualizações

Influenciadores digitais que não existem

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