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.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Placa</title>
</head>
<body>
<form>
<p>
<label>Insira a placa do carro:
<input type="text" name="placa" onkeyup="validarPlaca(this)" placeholder="ABC-1234" maxlength="8" autofocus>
<!-- Ali o atributo "maxlength" evita que o usuário digite mais do que 8 caracteres -->
</label>
</p>
</form>
</body>
</html>
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.
<script>
function validarPlaca(entradaDoUsuario) {
var placa = entradaDoUsuario.value; // Passa para a variável 'placa' o que o usuário digitar no formulário
if (placa.length === 1 || placa.length === 2) { // Quando a string possuir 1 ou 2 dígitos
placaMaiuscula = placa.toUpperCase(); // Passa a string para letras maiúsculas
document.forms[0].placa.value = placaMaiuscula; // Coloca a string modificada de volta no formulário
return true;
}
if (placa.length === 3){ // Quando a string possuir 3 dígitos
placa += "-"; // Adiciona um hífen
placaMaiuscula = placa.toUpperCase(); // Passa a string para letras maiúsculas
document.forms[0].placa.value = placaMaiuscula; // Coloca a nova string de volta no formulário
return true;
}
}
</script>
Após adicionar esse trecho de código no seu arquivo html você poderá ver o mascaramento em ação.
Até a próxima =)