Máscara simples em JavaScript

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

[ Hits: 14.591 ]

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

Um manual mais da hora

Problemas para instalar WoeUSB no Debian, Ubuntu e derivados [Resolvido]

Alterar resolução de tela pelo Xorg

Servidor web simples sem instalar nada

Navegadores WebKit VS Placas NVidia

Leitura recomendada

Envie mensagens SMS de graça

Campo obrigatório HTML + Javascript

Validar todo o form de maneira dinâmica

Como recuperar uma senha salva no Chrome ou Firefox

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