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

Vantagens na utilização do WordPress
Artigos
8 visualizações
Artigos
8 visualizações

Vantagens na utilização do WordPress

Carlos L. A. da Silva - 20 de setembro de 2018

Uma hospedagem com um sistema de gerenciamento de conteúdo pode ser a melhor solução para a sua necessidade e a combinação da plataforma WordPress com o um serviço de hospedagem pensado nessa plataforma é a nossa melhor sugestão.

Manifesto Ágil: Uma Discussão sobre Aprendizado em Equipes
Artigos
389 compartilhamentos7,550 visualizações
Artigos
389 compartilhamentos7,550 visualizações

Manifesto Ágil: Uma Discussão sobre Aprendizado em Equipes

Plataformatec - 20 de setembro de 2018

Caso você tenha assistido alguma palestra sobre ágil na sua vida ou participado de algum treinamento sobre o assunto, é bem provável que tenha se deparado com o conceito de Shu Ha Ri. Para quem não conhece, o nome tem origem no Aikido e foi introduzido no ambiente de desenvolvimento de software por Alistair Cockburn, […]

Evento Seniortec Experience vai debater tendências da área de Desenvolvimento e TI
Notícias
9 visualizações
Notícias
9 visualizações

Evento Seniortec Experience vai debater tendências da área de Desenvolvimento e TI

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

Décima edição do evento acontece no dia 21 de setembro (6.ª feira), em Blumenau (SC), e o Código Fonte vai estar lá para conferir!

7 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

Deixe um Comentário

Your email address will not be published.

Mais publicações

20 anos de Google
Artigos
9 visualizações
9 visualizações

20 anos de Google

Carlos L. A. da Silva - 17 de setembro de 2018
Promoções de Jogos do Final de Semana (14/09)
Notícias
15 visualizações
15 visualizações

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

Carlos L. A. da Silva - 14 de setembro de 2018
Jogos independentes: o segredo do sucesso não existe mas…
Artigos
19 visualizações
19 visualizações

Jogos independentes: o segredo do sucesso não existe mas…

Carlos L. A. da Silva - 12 de setembro de 2018
Como blindar sua conta no Twitter contra bots
Dicas
17 visualizações
17 visualizações

Como blindar sua conta no Twitter contra bots

Carlos L. A. da Silva - 10 de setembro de 2018