Máscara simples em JavaScript

Autor: Cézar Augusto de Campos
14 de setembro de 2019

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 javascriptfunciona 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:

                
<!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.

É 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 =)