Μορφοποίηση πεδίων εισαγωγής με το Cleave.js
Σκεφτείτε όλα τα διαφορετικά πεδία εισαγωγής που απαιτούν μια διαμορφωμένη δομή. Αριθμοί τηλεφώνου, πιστωτικές κάρτες, ημερομηνίες γέννησης, διευθύνσεις δρόμων ... όλοι τους έχουν τα δικά τους μοναδικά μοτίβα.
Είναι αρκετά εύκολο να αφήσετε αυτά τα πεδία μόνο και να εμπιστευτείτε τον χρήστη. Αλλά ίσως είναι καλύτερο να το χρησιμοποιήσετε Cleave.js, ένα δωρεάν plugin για βανίλια JavaScript για να σε βοηθησω να διαμορφώνουν αυτόματα τα πεδία εισαγωγής.
Το HTML5 συνοδεύεται από το δικό του το σύνολο των εισροών που σχετίζονται με τα πρότυπα δεδομένων όπως αριθμούς τηλεφώνου. Με το Cleave, μπορείτε να πάρετε αυτό στο επόμενο επίπεδο με προσαρμοσμένες εισόδους ότι αυτόματη μορφοποίηση κειμένου όπως είναι δακτυλογραφημένο.
Από προεπιλογή, το plugin υποστηρίζει πέντε βασικά σχέδια κειμένου:
- Αριθμοί πιστωτικών καρτών
- Τηλεφωνικοί αριθμοί
- Ημερομηνίες
- Αριθμητικό στυλ (με κόμματα)
- Πεδία προσαρμοσμένων εισροών
Αυτή η τελευταία επιλογή είναι η πιο cool γιατί μπορείς να φτιάξεις το δικό σου προσαρμοσμένα πρότυπα δεδομένων από το μηδέν. Η Cleave δεν σας αναγκάζει να ακολουθείτε οποιαδήποτε αυστηρή μεθοδολογία.
Αντ 'αυτού, σας δίνει τα εργαλεία για να δημιουργήστε τις δικές σας εισόδους με προαιρετική υποστήριξη για τα στοιχεία React και γωνιακά. Υποστηρίζει επίσης όλα τα μεγάλα προγράμματα περιήγησης και θα πρέπει να ταιριάζει με την υποστήριξη για παλιά προγράμματα περιήγησης μαζί με jQuery.
Σημειώστε ότι αυτό δεν είναι ένα σκληρό plugin για τη ρύθμιση. Εσύ στοχεύσετε σε οποιοδήποτε αναγνωριστικό ή κατηγορία που έχετε στο πεδίο εισαγωγής και περάστε το σε μια νέα παράμετρο Cleave. Ακολουθεί ένα απόσπασμα δείγματος:
var cleave = νέα διαγραφή ('. input-phone', phone: true, phoneRegionCode: 'χώρα'); Ωστόσο, ενώ το Cleave μπορεί να είναι εύκολο να ρυθμιστεί, έχει πολλά προσαρμοσμένα χαρακτηριστικά μπορείτε να παίξετε με.
Όλα τα έγγραφα είναι φιλοξενούνται στο εσωτερικό του repo, οπότε θα πρέπει να περιηγηθείτε στη σελίδα GitHub στο βρείτε όλες τις διαφορετικές μεθόδους και επιλογές. Συγκεκριμένα, το σελίδα επιλογών έχει πολλά να περάσει και μπορεί να πάρει λίγο χρόνο για να βρείτε αυτό που θέλετε.
Ευτυχώς, ο Cleave έχει πολλά ζωντανά παραδείγματα μπορείτε να μελετήσετε και να αναπαράγετε. Αυτά τα παραδείγματα είναι επίσης δωρεάν λήψη από το repo του GitHub. Αν θέλετε να δείτε περισσότερα ζωντανά παραδείγματα Επισκέψου το Αρχική σελίδα του Cleave.js ή check out αυτό το βιολί μαρκαρισμένο με demos.
