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
Como cortar texto sem usar uma linha de script
Carlos L. A. da Silva - 11 de janeiro de 2021Conheça o poder da propriedade text-overflow no CSS e nunca mais edite strings no braço.
Como começar a programar
Carlos L. A. da Silva - 7 de janeiro de 2021Então, você quer entrar nessa vida? A decisão é sua, mas nós podemos te ajudar com os primeiros passos.
Como cancelar qualquer conta online para sempre
Carlos L. A. da Silva - 30 de dezembro de 2020Que tal fazer uma limpeza nas suas contas inativas ou finalmente largar aquela rede social que só dá desgosto?
8 Responses
Deixe um Comentário
Mais publicações
Promoções de Jogos do Final de Semana (18/12) – Edição Natalina
Carlos L. A. da Silva - 18 de dezembro de 2020Como fazer uma árvore de Natal… com CSS!
Carlos L. A. da Silva - 21 de dezembro de 2020
Como cortar texto sem usar uma linha de script
11 de janeiro de 2021
Como começar a programar
7 de janeiro de 2021
Como cancelar qualquer conta online para sempre
30 de dezembro de 2020
Retrospectiva (positiva) de 2020
29 de dezembro de 2020
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!