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:
1 |
<script type="text/javascript" src="js/jquery.mask.min.js"/></script> |
Em seguida no campo input do telefone, colocaremos o seguinte código:
1 2 3 |
<label for="txttelefone">Telefone</label> <input type="tel" name="txttelefone" id="txttelefone" pattern="\([0-9]{2}\)[\s][0-9]{4}-[0-9]{4,5}" /> <script type="text/javascript">$("#txttelefone").mask("(00) 0000-00009");</script> |
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

Quanto ganha um programador? Confira uma das maiores pesquisas salariais realizadas no Brasil
Redação - 23 de fevereiro de 2021O 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?
Carlos L. A. da Silva - 19 de fevereiro de 2021Seus 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
Carlos L. A. da Silva - 5 de fevereiro de 2021O 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
Deixe uma Resposta para Douglas Cancelar resposta
Mais publicações




Perfeito cara muito obrigado
simples e prático! caiu como uma luva
Somente celulares como seria o código ?
ok, bacana! bem prático, porém o telefone celular adicionou o 9 do lado esquerdo, deveria ficar (11) 12345-1234 para celular e está (11) 1234-12345… alguém tem alguma sugestão para aprimorar?
Boa tarde,
bom simples e atual!
sei que ja faz tempo mas pode me ajudar a mudar a cor do focus!?
Obrigado!
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!
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!