Máscara simples em JavaScript
Dica publicada em Javascript / Formulários
Máscara simples em JavaScript
A fim de mostrar como criar uma máscara do zero, esta dica vai lhe mostrar como fazer isso sem o jQuery. O propósito disso é mostrar a lógica de como uma máscara em javascript funciona e age nos formulários.
Neste exemplo vou mostrar como mascarar a entrada de uma placa de automóvel padrão brasileiro ABC-1234 de modo que todos os usuários do seu sistema preencham da mesma forma. Eu me deparei com essa situação enquanto fazia um "mock application" de um sistema web voltado a área de logística e não tinha nenhuma biblioteca javascript instalada.
Bom, comecemos então com o formulário em HTML.
Com esse código-fonte:
O input deve chamar a função javascript a cada digitação do usuário, então a função se responsabilizará pela formatação do dado durante o preenchimento do formulário.
Agora vamos implementar a função em javascript que vai manipular o dado de acordo o padrão que queremos (ABC-1234) e devolver ao formulário enquanto o usuário digita.
Para isso foi criado uma função que transforma as três primeiras letras em maiúsculas e adiciona um hífen automaticamente toda vez que o usuário termina de digitar as três primeiras letras.
Após adicionar esse trecho de código no seu arquivo html você poderá ver o mascaramento em ação.
É isso, eu usei o atributo onkeyup ao invés do onkeydown pois o último atrapalha um monte na hora de apagar, caso o usuário cometa um erro de digitação ele pode ficar frustrado ao perceber que não consegue apagar o que digitou XD. É bom ficar ligado nisso também.
Até a próxima =)
Neste exemplo vou mostrar como mascarar a entrada de uma placa de automóvel padrão brasileiro ABC-1234 de modo que todos os usuários do seu sistema preencham da mesma forma. Eu me deparei com essa situação enquanto fazia um "mock application" de um sistema web voltado a área de logística e não tinha nenhuma biblioteca javascript instalada.
Bom, comecemos então com o formulário em HTML.
Placa
O input deve chamar a função javascript a cada digitação do usuário, então a função se responsabilizará pela formatação do dado durante o preenchimento do formulário.
Agora vamos implementar a função em javascript que vai manipular o dado de acordo o padrão que queremos (ABC-1234) e devolver ao formulário enquanto o usuário digita.
Para isso foi criado uma função que transforma as três primeiras letras em maiúsculas e adiciona um hífen automaticamente toda vez que o usuário termina de digitar as três primeiras letras.
Após adicionar esse trecho de código no seu arquivo html você poderá ver o mascaramento em ação.
Até a próxima =)