in Django

Django Form Input Mask

Quem nunca precisou ou pensou em colocar uma máscara em um input da sua aplicação web? Acredito que é consenso que as máscaras tornam a experiência e usabilidade das aplicações melhores.

Pensando nisso, escrevi este post para demonstrar como faço isso nas minhas aplicações usando jQuery, jQuery UI e jQuery Mask Plugin, tudo de uma forma bem simples e direta, continue lendo e verá como é simples fazer isso.

Máscaras

Os inputs da aplicação quando recebem uma máscara se tornam muito mais elegantes, as máscaras também podem deixar os usuários mais despreocupados em relação a formatação do dado que deverá ser fornecido, tipo, será que devo colocar pontos? Hifens? Parênteses etc.

Bom, explicado a necessidade (ou não) de se usar máscaras, vamos ao que importa.

Show me the code

Vou partir do pressuposto que você já tem um projeto Django criado, se precisar, tem o link do projeto criado para este post, clique aqui.

Faça o download das dependências ou crie um link para o CDN da mesma. Eu criei um arquivo chamado masks.js e nele coloquei os códigos JavaScript necessário para a inserção da máscara, basicamente você vai precisar capturar a classe do input e chamar o método mask() do jQuery Mask Plugin, este foi usado para colocar as máscaras de data, CPF e Telefone, o calendário é colocado pelo jQuery UI, nesse caso, você também vai precisar capturar a classe do elemento e chamar o método datepicker(), é possível também definir algumas formatações para exibição da data no campo.

Maks JS

Para o HTML, dar uma olhada na imagem abaixo.

Input classes

Algumas classes são do Twitter Bootstrap, usei ele pra dar aquele tapa no visual dos campos, as classes que criei estão sublinhadas com essas linhas mais retas do que “linhas no bolso”.

E para finalizar, dar uma olhada em como fica no navegador, esse deve ser o resultado que você deve obter quando implementar as máscaras.

Resultado final

Bom, é isso, abaixo vou deixar os links das libs que usei no projeto, qualquer dúvida, já sabe, é só comentar aí em baixo ou entre em contato de outra forma. Se não tiver dúvidas, colabore mesmo assim, conhece outras libs? Outras formas de fazer? Diz pra gente como você faz!!!

Links:

Fui! Um forte abraço e até o próximo post! Ahhhh, não esqueça de compartilhar nas suas redes sociais, grupos de WhatsApp e Telegram, Discord, enfim, você com certeza estará ajudando muita gente com essa ação e ainda ganha “fama” de estar por dentro do assunto! 😎

Deixe seu comentário

Comment