Passo a passo: criando máscara para input com jQuery Inputmask

Máscara para input é nada mais do que uma string de caracteres utilizada para indicar qual é o formato válido de determinado campo do formulário. Além de ser muito útil por trazer uma melhor experiência para o usuário é muito usada para determinados campos que devem ser de preenchido por um formato obrigatório.

Formatos prédefinidos pode ajudar em diversos tipos de campos, como datas, numéricos, números de telefone, etc. O inputmask é muito simples de usar, com apenas uma declaração já conseguimos definir a máscara de determinado campo. O inputmask ainda permite habilitar, desabilitar e vem com vários recursos e opções.

jQuery Inputmask é uma biblioteca javascript que permite de forma simples criarmos máscaras para os campos input dos formulários. Com esse plugin facilmente podemos formatar os dados de determinados campos input. Este plugin oferece vários funcionalidades, podemos usar com valores numérios, datas, números de telefone etc. Existe também o plugin Mask, mas o inputmask tem mais funcionalidades.

Alguns campos que utilizam máscaras

    $(document).ready(function(){
        $('#telefone').inputmask('(99) 99999-9999');
        $('#data').inputmask('99/99/9999');
        $('#cpf').inputmask('999.999.999-99');
    })

Telefone Data CPF

Usando o plugin

Primeiramente precisamos importar o jquery:

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

Vamos importar o inputmask:

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

Defina o campo imput:

<input type="text" name="" id="telefone">

Implemente o script

<script>
    $(document).ready(function(){
        $('#telefone').inputmask('(99) 99999-9999')
    })
</script>

A capacidade de personalização oferecida pelo InputMask permite a você adaptar as máscaras de acordo com as necessidades específicas dos seus projetos, tornando-as uma ferramenta flexível e versátil. O uso de máscaras para input é uma prática recomendada que pode contribuir para a qualidade e eficiência das interações do usuário.

Vejamos a seguir mais um exemplo simples de forma de aplicação.

Exemplo com campos para cartão de crédito:

Código do exemplo acima:

    <div>
    <label>Número do cartão</label><br>
    <input type="text" name="" id="number" placeholder="0000 0000 0000 0000">
    </div>

    <div>
    <label>Código</label><br>
    <input type="text" name="" id="code" placeholder="000">
    </div>

    <div>
    <label>Data</label><br>
    <input type="text" name="" id="data2" placeholder="mm/aa">
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

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

<script>
    $(document).ready(function(){
        $('#number').inputmask('9999 9999 9999 9999');
        $('#code').inputmask('999');
        $('#data2').inputmask('99/99');
    })
</script>

Conclusão:

Para concluir, a implementação de máscaras para inputs utilizando a bibliotecas do InputMask oferece uma solução poderosa e eficaz para a validação e formatação de dados de entrada em formulários. Com configurações personalizadas, agora você pode controlar precisamente o formato e os tipos de dados aceitos em cada campo, melhorando assim a experiência do usuário do seu site ou projeto e reduzindo os erros de inserção de dados.