Os aplicativos da web modernos aceitam várias entradas do usuário: cliques do mouse, toque na tela e eventos do teclado, gestos, áudio e arquivos. Quase todos os aplicativos da web usam eventos de teclado para capturar dados detalhados de entrada do usuário. Em outras palavras, os usuários podem inserir os dados necessários em aplicativos da web típicos usando os teclados de seus dispositivos. Por exemplo, um usuário pode inserir um nome, número de telefone, código postal e endereço de e-mail durante o processo de registro de um determinado aplicativo da web, e essas informações são então comunicadas ao back-end.
Cada usuário é diferente. Eles podem ter práticas exclusivas quando se trata de preenchimento de formulários e, muitas vezes, tentam usar vários formatos nos campos de entrada. Se um determinado aplicativo da web exibe um campo de entrada de texto bruto para capturar um número de telefone, por exemplo, o usuário pode enfrentar vários problemas de usabilidade, como não ser capaz de prever o formato aceito do campo de entrada ao digitar.
Para evitar esses tipos de problemas, você pode usar máscaras de entrada para fornecer restrições amigáveis para um determinado campo de entrada do usuário. Neste artigo, explicarei como você pode usar a máscara de entrada em seus aplicativos React .
O que é máscara de entrada?
No design de experiência do usuário (UX), uma máscara de entrada se refere a um modelo de string que é criado com base em um formato de entrada específico para evitar erros de transcrição . Se o usuário tentar inserir um caractere inválido, o elemento de entrada mascarado bloqueia o pressionamento de tecla inválido. Por exemplo, os usuários não poderão inserir letras em inglês em um campo de número de telefone mascarado.
Os desenvolvedores de front-end podem usar máscaras de entrada para ajudar a garantir que entradas de usuário limpas e válidas sejam enviadas para seus back-ends de aplicativos da web. Ao mesmo tempo, as máscaras de entrada motivam os usuários a inserir entradas claras e corretas.
Mascaramento de entrada em aplicativos React
Existem várias bibliotecas que podemos usar para criar máscaras de entrada no React. A biblioteca react-input-mask é o mais popular e oferece uma API muito flexível para desenvolvedores. Como um bônus, seu comportamento segue um padrão de design amigável com a UX.
Primeiro, instale o pacote npm react-input-mask para criar máscaras de entrada em seu aplicativo React.
npm install react-input-mask--save
Agora, vamos tentar criar uma caixa de entrada simples mascarada para um número de telefone para verificar se a biblioteca funciona ou não. Adicione o seguinte código em seu arquivo ou componente App.js .
import {useState} de'react';
importar InputMask de'react-input-mask';
function PhoneInput (props) { Retorna ( );
}
function App () { const [telefone, setPhone]=useState (''); const handleInput=({destino: {valor}})=> setPhone (valor); Retorna ( Telefone: {phone} );
}
exportar aplicativo padrão;
Se você iniciar o servidor de desenvolvimento React com npm start ou yarn start , verá uma entrada mascarada para inserir um número de telefone padrão dos EUA (começando com +1 código de discagem), conforme mostrado abaixo:
Implementamos um componente reutilizável para aceitar números de telefone com o componente InputMask da biblioteca. O componente de máscara genérica da biblioteca responde aos seguintes props React:
-
máscara: um modelo de entrada do usuário com caracteres especiais predefinidos-9para combinar um número,apara uma letra e*para um número ou uma letra -
maskChar: este caractere pode ser usado para preencher a parte ausente da string de entrada; o valor padrão é_(sublinhado) -
formatChars: você pode alterar os caracteres padrão e expressões regulares usados para mascarar (na propriedademask) alterando esta propriedade -
alwaysShowMask: a biblioteca geralmente mostra a máscara quando o usuário foca na entrada mascarada; defina esta propriedade comotruese você sempre quiser mostrar a máscara
Como qualquer outro elemento de entrada típico, podemos usar o evento onChange para alterar o estado do componente com base nas entradas do usuário.
Exemplos básicos de react-input-mask
O conceito de mascaramento de entrada pode ser usado em muitos cenários diferentes para aprimorar a facilidade de uso dos aplicativos da web. Verifique os seguintes exemplos básicos de mascaramento.
PIN de 4 dígitos
função PINInput (props) { Retorna ( );
}
OTP estilo Google
função GoogleOTP (props) { Retorna ( );
}
Cartão de crédito padrão
function CreditCardInput (props) { Retorna ( );
}
Exemplos react-input-mask avançados
Os exemplos acima usam expressões regulares integradas para mascarar. Por exemplo, a máscara do PIN de quatro dígitos usa 9 para combinar os dígitos.
No entanto, não podemos implementar todas as regras de mascaramento com essas expressões regulares predefinidas. Em outras palavras, precisamos definir caracteres de mascaramento personalizados com diferentes expressões regulares. Em alguns cenários, também precisamos ter máscaras dinâmicas, onde a entrada do usuário direciona as restrições de caracteres subsequentes que eles inserem no campo.
A seguir, veremos alguns exemplos avançados que usam caracteres de mascaramento personalizados e máscaras condicionais.
Um código de produto personalizado
Suponha que você precise implementar uma máscara para capturar um código de produto válido em um aplicativo de gerenciamento de supermercado escrito em React. Vamos definir as regras para um código de produto válido como:
- Todo código de produto começa com
P(produto único) ouK(kit) - O resto do código do produto consiste em quatro dígitos pares
Precisamos definir caracteres de mascaramento personalizados para implementar as regras acima. Verifique o seguinte código.
const MaskedInput=(props)=> { //Definindo caracteres de mascaramento personalizados //P corresponderá a P ou K //0 (zero) corresponderá a dígitos pares const formatChars={ 'P':'[PK]', '0':'[02468]' }; return ( )
};
Entrada de tempo
Suponha que você precise pedir ao usuário para inserir uma hora usando o formato hh: mm . A implementação mais simples da máscara de entrada de tempo pode usar a máscara 99:99 , mas os usuários ainda podem inserir algumas entradas de tempo inválidas, como 59:10 , 08: 65 , etc.
Uma máscara de entrada normalmente se refere a uma entrada de string com um formato específico-não relacionado à validação estrita. No entanto, podemos aplicar o mascaramento condicional com base na entrada do usuário para adicionar melhorias a esses cenários.
Por exemplo, só podemos aceitar os dígitos 0 , 1 e 2 para a posição do primeiro caractere de máscara. Depois disso, podemos alterar a lógica do segundo caractere de máscara com base no primeiro dígito da entrada do usuário.
Dê uma olhada no código a seguir, que usa mascaramento condicional.
função
TimeInput (props) { let mask='12: 34'; let formatChars={ '1':'[0-2]', '2':'[0-9]', '3':'[0-5]', '4':'[0-9]' }; deixe beforeMaskedValueChange=(newState, oldState, userInput)=> { deixe {valor}=newState; //Máscara condicional para o segundo dígito com base no primeiro dígito if (value.startsWith ('2')) formatChars ['2']='[0-3]';//Para bloquear 24, 25, etc. senão formatChars ['2']='[0-9]';//Para permitir 05, 12, etc. return {valor, seleção: newState.selection}; }
Retorna ( );
}
O evento beforeMaskedValueChange será disparado antes que o campo de entrada mascarado seja atualizado com a entrada do usuário mais recente. Isso significa que podemos usá-lo para alterar a máscara dinamicamente.
Como estilizar máscaras de entrada
A biblioteca react-input-mask renderiza caixas de entrada mascaradas usando entradas HTML típicas. Portanto, você pode alterar o estilo adicionando classes CSS como desejar. Se desejar usar outro componente em vez da entrada HTML, como Material , implemente seu componente como abaixo.
importar InputMask de'react-input-mask'; importar entrada de'@ material-ui/core/Input'; const MaskedInput=(props)=> ({(inputProps)=> } );
O snippet de código acima renderiza o elemento de entrada Material em vez do elemento de entrada HTML nativo como o campo de entrada do PIN mascarado.
Conclusão
O conceito de máscara de entrada é adequado para capturar entradas do usuário com um formato padrão específico, como endereços IP, números de cartão de crédito, códigos de produto e números de cartão de identificação, entre outros.
O mantenedor da biblioteca react-input-mask é planejando lançar uma nova versão estável (v3.0) , e já existe um versão alfa v3.0 com alguns aprimoramentos e modificações na API. A próxima versão estável pode conter a implementação do branch de desenvolvimento atual. Usamos a versão estável atual (v2.0.4) neste tutorial porque as dependências com versão alfa não são recomendadas para nenhum sistema de produção.
A postagem Implementando react-input-mask para aplicativos da web apareceu primeiro no LogRocket Blog .
