Restringindo Entrada com JQuery

Se há uma coisa que me leva à loucura on-line, é quando os formulários de entrada me permitem inserir dados incorretos, apenas para apontar o erro depois de tentar enviá-lo. Parece que metade dos formulários que submeto precisam ser preenchidos e enviados novamente porque não incluí uma letra maiúscula na minha senha, ou fiz, ou a senha só pode ser numérica, ou algum outro requisito que ninguém pensou em mencionar.

A forma como o cérebro funciona, procuramos soluções baseadas nas ferramentas à nossa frente. Você não entra com letras maiúsculas no caixa eletrônico? Não, porque o teclado do ATM só tem números. Você pode acertar o número errado por engano, mas nunca tentou digitar seu endereço de e-mail ou o nome de solteira de sua mãe.

Aí reside o problema, o teclado que você usa complica a entrada de dados online. Ele provavelmente tem entre 75 e 100 chaves e ainda mais caracteres são facilmente acessíveis, mantendo combinações de teclas múltiplas. Usá-lo para entrar no Facebook é como sair para o leite em uma Ferrari.

É claro que o seu teclado precisa ter mais opções de entrada do que qualquer campo de formulário específico requer, porque é uma ferramenta multiuso; você praticamente não pode ter um teclado diferente para cada tipo de entrada possível.

Isso leva a um sério problema de usabilidade: os usuários são constantemente solicitados a "corrigir" suas informações para se adequarem a um formulário. Essa é uma ótima maneira de aumentar a frustração e perder negócios.

Os dispositivos com tela sensível ao toque deram grandes passos nessa área, modificando o teclado na tela para adaptar os tipos de entrada possíveis aos dados necessários; insira um endereço de e-mail em um iPhone, por exemplo, e você não poderá inserir um espaço por engano, porque a barra de espaço não é fornecida.

Imagem do teclado digital via Shutterstock

Até que todos nós trabalhemos em telas sensíveis ao toque, precisamos de uma solução temporária, e na verdade é bem simples: usando jQuery, podemos deslizar uma camada de inteligência entre o teclado e o campo de entrada e aceitar os dados apenas dentro dos limites esperados , ignorando qualquer coisa fora desses limites, confiante de que é um erro.

Primeiro, precisamos configurar um campo de entrada em HTML que queremos restringir, um número de telefone, por exemplo:

Phone:

Então, na cabeça do documento, precisamos importar o jQuery:

E imediatamente depois, adicione o seguinte script:

Esse script é executado assim que o documento está pronto, anexando um método de pressionamento de tecla ao campo de entrada .phoneInput . Em seguida, detectamos qual tecla foi pressionada com base em sua propriedade charCode - o número 0 recebe o código 48, 1 é 49 e assim por diante - qualquer chave que esteja fora de nosso intervalo deve retornar false. Se o método retornar false, o navegador simplesmente ignorará o pressionamento de tecla.

Isso significa que, se o usuário pressionar qualquer tecla que não seja 0–9, a entrada será ignorada, restringindo efetivamente a entrada aos números.

Podemos aplicar a mesma técnica a praticamente qualquer campo, construindo regras complexas usando AND lógico e OR lógico. Por exemplo, se quiséssemos restringir a entrada de um sobrenome, precisaríamos restringir a entrada a letras minúsculas (97 a 122), caracteres maiúsculos (65 a 90) e o hífen ocasional (45):

$('.surnameInput').keypress(function(key) {if((key.charCode < 97 || key.charCode > 122) && (key.charCode < 65 || key.charCode > 90) && (key.charCode != 45)) return false;});

Você pode experimente uma demonstração aqui .

Este código é um aprimoramento progressivo. Isso tirará um pouco da pressão da validação do seu servidor, mas isso não significa que você não deva validar as informações coletadas.

Prevenção, como diz o ditado, é melhor do que remediar; Usando essa dica, você verá uma redução no número de pessoas que começam, mas não concluem seus formulários, especialmente quando há requisitos complexos de dados envolvidos.

Os usuários cometem erros regularmente em seus formulários? Como você lida com os erros? Deixe-nos saber nos comentários.

Imagem em destaque / miniatura: imagem do teclado via Shutterstock