Limitazione dell'input con JQuery

Se c'è una cosa che mi fa impazzire online, è quando i moduli di input mi consentono di inserire dati errati, solo per segnalare l'errore dopo che ho provato a inviarlo. Sembra che metà delle forme che invio debbano essere ricaricate e inviate di nuovo perché non ho incluso una lettera maiuscola nella mia password, o l'ho fatto, o la password può essere solo numerica, o qualche altro requisito che nessuno ha pensato di menzionare.

Il modo in cui funziona il cervello, cerchiamo soluzioni basate sugli strumenti che abbiamo di fronte. Non inserisci lettere maiuscole nell'ATM, vero? No, perché la tastiera ATM ha solo numeri. Potresti aver sbagliato il numero sbagliato, ma non hai mai provato a inserire il tuo indirizzo email o il cognome da nubile di tua madre.

Qui sta il problema, la tastiera che usi complica l'inserimento dei dati online. Probabilmente ha tra 75 e 100 tasti e ancora più caratteri sono facilmente accessibili tenendo combinazioni multi-tasto. Usarlo per accedere a Facebook è come uscire a prendere il latte in una Ferrari.

Ovviamente, la tua tastiera deve avere più opzioni di input di quelle richieste da qualsiasi campo specifico, perché è uno strumento multiuso; non puoi praticamente avere una tastiera diversa per ogni possibile tipo di input.

Questo porta a un serio problema di usabilità: agli utenti viene costantemente chiesto di "correggere" le proprie informazioni in base a un modulo. È un ottimo modo per aumentare la frustrazione e perdere affari.

I dispositivi touchscreen hanno fatto passi da gigante in quest'area modificando la tastiera su schermo per adattare i tipi di input possibili, ai dati richiesti; inserisci un indirizzo e-mail su un iPhone, ad esempio, e non sarai in grado di inserire uno spazio per errore, perché la barra spaziatrice non è fornita.

Immagine della tastiera digitale via Shutterstock

Fino a quando non lavoriamo tutti sul touchscreen, abbiamo bisogno di una soluzione temporanea, e ce n'è in realtà una semplice: usando jQuery possiamo far scivolare un livello di intelligenza tra la tastiera e il campo di input e accettare solo i dati se rientra nei limiti previsti , ignorando qualsiasi cosa al di fuori di questi limiti, fiducioso che si tratti di un errore.

Innanzitutto, abbiamo bisogno di impostare un campo di input in HTML che vogliamo limitare, ad esempio un numero di telefono:

Phone:

Quindi, nel capo del documento, dobbiamo importare jQuery:

E subito dopo aggiungi il seguente script:

Questo script viene eseguito una volta che il documento è pronto, allegando un metodo di pressione tasto al campo di input .phoneInput . Rileviamo quindi quale tasto è stato premuto in base alla sua proprietà charCode : al numero 0 è assegnato il codice 48, 1 è 49 e così via - qualsiasi chiave fuori dal nostro intervallo dovrebbe restituire false. Se il metodo restituisce false il browser ignorerà semplicemente la sequenza di tasti.

Ciò significa che se l'utente preme un tasto diverso da 0-9, l'input verrà ignorato, limitando efficacemente l'input ai numeri.

Possiamo applicare la stessa tecnica a quasi tutti i campi, costruendo regole complesse usando OR logico e OR logico. Ad esempio, se volessimo limitare l'input per un cognome, avremmo bisogno di limitare l'input alle lettere minuscole (97-122), ai caratteri maiuscoli (65 - 90) e al trattino occasionale (45):

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

Puoi prova una demo qui .

Questo codice è un miglioramento progressivo. Ci vorrà un po 'di fatica per la convalida del server, ma ciò non significa che non dovresti convalidare le informazioni che stai raccogliendo.

La prevenzione, come si suol dire, è meglio che curare; e utilizzando questo suggerimento vedrai una riduzione del numero di persone che iniziano, ma non completano i moduli, specialmente quando sono coinvolti requisiti di dati complessi.

Gli utenti fanno regolarmente errori sui moduli? Come gestisci gli errori? Fateci sapere nei commenti.

Immagine in primo piano / miniatura: immagine della tastiera via Shutterstock