Como criar máscaras para input com plugin Jquery Mask

Com máscaras para input você consegue trazer uma melhor experiência do usuário para os visitantes do seu site que utilizam os recursos de formulário, seja para preencher com informações corretas ou para tornar a ação de preencher um formulário mais dinâmica. Hoje, vamos configurar máscara de input com Jquery Mask

Sem dúvida essa é uma função bem útil, uma vez que deixa seu formulário com uma melhor usabilidade e com as dados “pré-formatados”, e caso você esteja prestando um serviço de desenvolvimento, seu serviço fica mais profissional.

Se você precisa inserir máscaras nos campos do seu formulário você está no lugar certo, neste artigo vamos aprender como utilizar o plugin mask para criação de máscara para input com jquery de um formulário.

Por que usar máscaras no input?

Melhora a experiência do usuário: Máscaras de input podem ajudar os usuários a inserir informações de forma mais precisa. Por exemplo, uma máscara de telefone pode formatar automaticamente os números no formato correto.

Reduz erros de entrada: Máscaras de input podem limitar a entrada de dados a formatos válidos, impedindo que os usuários insiram informações incorretas. Isso é útil em campos sensíveis, como números de cartão de crédito, onde erros podem ter consequências financeiras graves.

Facilita a validação de dados: Com máscaras de input, a validação dos dados pode ser simplificada, pois você já tem uma ideia do formato esperado dos dados. Isso pode economizar tempo e esforço na fase de validação.

Alguns exemplos de uso de máscaras para input:

Máscara para input campo data

Máscara para input campo telefone

Máscara para input campo CPF

Máscara para input campo CEP

Agora, usando Jquery e o plugin mask conseguimos criar máscaras para o input de forma simples, em seguida veja como criar você mesmos suas próprias máscaras de input.

Criando suas máscaras de input com jquery mask

Importe o Jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Em seguida, importe o plugin Mask:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>

Tendo o importando o Jquery e o Plugin Mask, vamos usar como exemplo um input simples:

 <input type="text" name="data" id="maskdate">

Repare no nome do ID, é através dele que vamos aplicar a máscara ao input:

$(document).ready(function(){
     $('#maskdate').mask('00/00/0000');
});

Resumo:

<input type="text" name="data" id="maskdate">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>

<script>
$(document).ready(function(){
     $('#maskdate').mask('00/00/0000');
});
</script>

Conclusão

Você acaba de aprender como criar máscaras para input, aproveite e deixe seu formulário mais dinâmico com esse recurso.