Máscara simples em JavaScript

Publicado por Cézar Augusto em 14/09/2019

[ Hits: 14.950 ]

Blog: https://www.cezarcampos.com.br/

3 0

Denuncie Favoritos Indicar Impressora

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:

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

Outras dicas deste autor

Alterar resolução de tela pelo monitors.xml

Navegadores WebKit VS Placas NVidia

Servidor web simples sem instalar nada

Tema escuro no Elementary sem programas

Alterar resolução de tela pelo Xorg

Leitura recomendada

Ligue de graça para o mundo todo

Campo obrigatório HTML + Javascript

Como recuperar uma senha salva no Chrome ou Firefox

Enviando dados em formulário através de variáveis ocultas

Live Bookmarks no Firefox