Περιορισμός εισόδου με JQuery
Εάν υπάρχει ένα πράγμα που με οδηγεί τρελά online, είναι όταν τα έντυπα εισόδου μου επιτρέπουν να εισάγω λανθασμένα δεδομένα, μόνο για να επισημάνω το λάθος αφού προσπαθήσω και να το υποβάλω. Φαίνεται ότι τα μισά από τα έντυπα που υποβάλλω πρέπει να ξαναγεμίζονται και να υποβάλλονται ξανά επειδή δεν έχω προσθέσει κεφαλαίο γράμμα στον κωδικό μου ή έκανα ή ο κωδικός πρόσβασης μπορεί να είναι μόνο αριθμητικός ή κάποια άλλη απαίτηση που κανείς δεν σκέφτηκε να αναφέρει.
Ο τρόπος με τον οποίο λειτουργεί ο εγκέφαλος, αναζητούμε λύσεις βασισμένες στα εργαλεία που βρίσκονται μπροστά μας. Δεν εισάγετε κεφαλαία γράμματα στο ATM; Όχι, επειδή το πληκτρολόγιο ATM έχει μόνο αριθμούς. Μπορεί να χτυπήσετε εσφαλμένα τον λάθος αριθμό, αλλά ποτέ δεν έχετε προσπαθήσει να εισάγετε τη διεύθυνση ηλεκτρονικού ταχυδρομείου σας ή το πατρικό όνομα της μητέρας σας.
Εκεί βρίσκεται το πρόβλημα, το πληκτρολόγιο που χρησιμοποιείτε περιπλέκει την εισαγωγή δεδομένων online. Έχει πιθανώς μεταξύ 75 και 100 πλήκτρα και ακόμη περισσότεροι χαρακτήρες είναι εύκολα προσβάσιμοι κρατώντας πολλούς συνδυασμούς πλήκτρων. Χρησιμοποιώντας το για να συνδεθείτε στο Facebook μοιάζει με το να βγάζετε γάλα σε μια Ferrari.
Φυσικά, το πληκτρολόγιό σας πρέπει να έχει περισσότερες επιλογές εισόδου από ό, τι απαιτεί κάποιο συγκεκριμένο πεδίο φόρμας, επειδή είναι ένα εργαλείο πολλαπλής χρήσης. δεν μπορείτε πρακτικά να έχετε ένα διαφορετικό πληκτρολόγιο για κάθε πιθανό τύπο εισόδου.
Αυτό οδηγεί σε ένα σοβαρό ζήτημα χρηστικότητας: οι χρήστες καλούνται συνεχώς να "διορθώνουν" τις πληροφορίες τους ώστε να ταιριάζουν σε μια φόρμα. Αυτός είναι ένας πολύ καλός τρόπος για να αυξήσετε την απογοήτευση και να χάσετε την επιχείρησή σας.
Οι συσκευές αφής έχουν πραγματοποιήσει μεγάλη πρόοδο σε αυτήν την περιοχή, αλλάζοντας το πληκτρολόγιο οθόνης για να προσαρμόσετε τους τύπους εισόδου που είναι δυνατόν, στα απαιτούμενα δεδομένα. για παράδειγμα, εισαγάγετε μια διεύθυνση ηλεκτρονικού ταχυδρομείου σε ένα iPhone και δεν θα μπορείτε να εισαγάγετε ένα διάστημα κατά λάθος, επειδή δεν παρέχεται το πλήκτρο διαστήματος.
Εικόνα ψηφιακού πληκτρολογίου μέσω Shutterstock
Μέχρι όλοι εργαζόμαστε σε οθόνες αφής, χρειαζόμαστε μια προσωρινή λύση και είναι πραγματικά πολύ απλή: χρησιμοποιώντας το jQuery μπορούμε να γλιστρήσουμε ένα στρώμα νοημοσύνης μεταξύ του πληκτρολογίου και του πεδίου εισαγωγής και να αποδεχθούμε τα δεδομένα μόνο εάν εμπίπτουν στα αναμενόμενα όρια , αγνοώντας τίποτα έξω από αυτά τα όρια, με την πεποίθηση ότι πρόκειται για λάθος.
Πρώτον, πρέπει να δημιουργήσουμε ένα πεδίο εισαγωγής σε HTML που θέλουμε να περιορίσουμε, έναν αριθμό τηλεφώνου για παράδειγμα:
Στη συνέχεια, στο κεφάλι του εγγράφου, πρέπει να εισαγάγουμε το jQuery:
Και αμέσως μετά προσθέστε το ακόλουθο σενάριο:
Αυτή η δέσμη ενεργειών εκτελείται όταν το έγγραφο είναι έτοιμο, επισυνάπτοντας μια μέθοδο πληκτρολόγησης στο πεδίο εισαγωγής .phoneInput . Στη συνέχεια, εντοπίζουμε ποιο πλήκτρο έχει πατηθεί με βάση την ιδιότητα του charCode - ο αριθμός 0 έχει αντιστοιχιστεί στον κωδικό 48, το 1 είναι 49 και ούτω καθεξής - οποιοδήποτε κλειδί εκτός του εύρους τιμών μας θα πρέπει να επιστρέψει ψευδές. Αν η μέθοδος επιστρέψει ψευδές, το πρόγραμμα περιήγησης απλά θα αγνοήσει το πληκτρολόγιο.
Αυτό σημαίνει ότι εάν ο χρήστης χτυπήσει οποιοδήποτε κλειδί που δεν είναι 0-9, η εισαγωγή θα αγνοηθεί, περιορίζοντας ουσιαστικά την είσοδο σε αριθμούς.
Μπορούμε να εφαρμόσουμε την ίδια τεχνική σε σχεδόν οποιοδήποτε πεδίο, δημιουργώντας σύνθετους κανόνες χρησιμοποιώντας λογική AND και λογική OR. Για παράδειγμα, εάν θέλουμε να περιορίσουμε την εισαγωγή ενός επώνυμου, θα πρέπει να περιορίσουμε την εισαγωγή σε πεζά γράμματα (97-122), κεφαλαίους χαρακτήρες (65-90) και την περιστασιακή παύλα (45):
$('.surnameInput').keypress(function(key) {if((key.charCode < 97 || key.charCode > 122) && (key.charCode < 65 || key.charCode > 90) && (key.charCode != 45)) return false;});Μπορείς δοκιμάστε ένα demo εδώ .
Αυτός ο κώδικας είναι μια προοδευτική βελτίωση. Θα χρειαστεί κάποιο από τα στελέχη από την επικύρωση του διακομιστή σας, αλλά αυτό δεν σημαίνει ότι δεν πρέπει επίσης να επικυρώσετε τις πληροφορίες που συλλέγετε.
Η πρόληψη, όπως λέγεται, είναι καλύτερη από τη θεραπεία. και χρησιμοποιώντας αυτήν την συμβουλή, θα δείτε μείωση του αριθμού των ατόμων που ξεκινούν, αλλά δεν ολοκληρώνουν τις φόρμες σας, ειδικά όταν πρόκειται για σύνθετες απαιτήσεις δεδομένων.
Οι χρήστες κάνουν συχνά λάθη στις φόρμες σας; Πώς χειρίζεστε τα λάθη; Ενημερώστε μας στα σχόλια.
Προτεινόμενη εικόνα / μικρογραφία: εικόνα πληκτρολογίου μέσω Shutterstock