Máscara simples em JavaScript

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

[ Hits: 13.803 ]

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

 


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

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

Você deixa a porta aberta?

Navegadores WebKit VS Placas NVidia

Como lidar com strings complicadas no PHP

Como verificar senha no shell script

Leitura recomendada

Envie mensagens SMS de graça

Campo obrigatório HTML + Javascript

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

Selecionando todos os checkboxes a partir de um principal com JavaScript

Live Bookmarks no Firefox

  

Comentários

Nenhum comentário foi encontrado.



Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts