Αυτό το πρόσθετο jQuery σάς επιτρέπει να επιλέξετε αυτόματα την κατάλληλη μάσκα εισαγωγής με βάση την εισαγόμενη αρχή του αριθμού τηλεφώνου. Αυτό σας επιτρέπει να κάνετε την εισαγωγή ενός αριθμού τηλεφώνου σε μια σελίδα ιστότοπου πιο γρήγορη και χωρίς σφάλματα. Επιπλέον, το ανεπτυγμένο πρόσθετο μπορεί να χρησιμοποιηθεί σε άλλες περιοχές, εάν οι κανόνες εισαγωγής μπορούν να αναπαρασταθούν με τη μορφή πολλών μασκών εισαγωγής.

Εισαγωγή Οι τοποθεσίες Web απαιτούν την εισαγωγή πληροφοριών αριθμού τηλεφώνου. Συμβαίνει ότι κάθε χώρα έχει το δικαίωμα να θεσπίσει τους δικούς της κανόνες κλήσης και το μήκος του αριθμού της, με αποτέλεσμα να δημιουργείται περιοδικά σύγχυση μεταξύ κατοίκων διαφορετικών χωρών: ορισμένοι συνηθίζουν να υποδεικνύουν τον αριθμό με το πρώτο ψηφίο 8, άλλοι με ένα πρώτο ψηφίο ψηφίο 0 και άλλα με σύμβολο +. Επανεξέταση υπαρχουσών λύσεων Για να επιλύσετε με κάποιο τρόπο την πολυπλοκότητα και να φέρετε τους αριθμούς σε ενοποιημένη μορφή, υπάρχουν 3 κύριες λύσεις:

Ζητείται από τον χρήστη να εισαγάγει τον αριθμό χρησιμοποιώντας μια μάσκα εισαγωγής. Πλεονέκτημα: Η σαφής εμφάνιση του αριθμού ελαχιστοποιεί πιθανά σφάλματα στον αριθμό. Μειονέκτημα: κάθε χώρα έχει τη δική της ορθογραφία και μήκος αριθμού.

Ο χρήστης καλείται να επιλέξει τη χώρα ξεχωριστά και να εισαγάγει τον υπόλοιπο αριθμό ξεχωριστά. είναι δυνατό με χρήση μάσκας εισόδου. Πλεονέκτημα: η δυνατότητα χρήσης διαφορετικών μασκών εισαγωγής για διαφορετικές χώρες (καθώς και περιοχές εντός μιας χώρας). Μειονεκτήματα: ο κατάλογος των χωρών (και των περιοχών σε κάθε χώρα) μπορεί να είναι μεγάλος. ο αριθμός τηλεφώνου παύει να υπάρχει ως ενιαίο σύνολο (ή απαιτείται προεπεξεργασία πριν από την αποθήκευση και εμφάνιση του αριθμού).

Τοποθετήστε ένα σύμβολο + μπροστά από τον αριθμό (εκτός της εισαγωγής) και επιτρέψτε την εισαγωγή μόνο αριθμών. Πλεονεκτήματα: ευκολία υλοποίησης. Μειονέκτημα: έλλειψη οπτικής απεικόνισης του αριθμού.

Προτεινόμενη λύση Ως αποτέλεσμα, αποφασίστηκε να τροποποιηθεί η συνήθης μάσκα εισαγωγής έτσι ώστε να αλλάζει σύμφωνα με την τρέχουσα τιμή του αριθμού. Επιπλέον, καθώς εισάγετε τον αριθμό, θα σας ζητηθεί να εμφανίσετε το όνομα της αναγνωρισμένης χώρας. Αυτή η προσέγγιση, υποκειμενικά, θα πρέπει να λύσει όλες τις αδυναμίες των λύσεων που αναφέρονται παραπάνω.

Λαμβάνοντας υπόψη το γεγονός ότι ο αριθμός των χωρών στον κόσμο είναι σχετικά μικρός, αποφασίστηκε να καταρτιστεί μια λίστα με μάσκες εισόδου για όλες τις χώρες. Ως πηγή χρησιμοποιήθηκαν πληροφορίες που δημοσιεύτηκαν στον ιστότοπο της Διεθνούς Ένωσης Τηλεπικοινωνιών.

Η συλλογή αυτών των πληροφοριών έφερε πολλές εκπλήξεις. Κατά τη διαδικασία συλλογής πληροφοριών, ήταν απαραίτητο να ληφθούν υπόψη όλες οι πιθανές επιλογές για αριθμούς τηλεφώνου, συμπεριλαμβανομένου του εσωτερικού της χώρας. Ωστόσο, λόγω του μεγάλου όγκου πληροφοριών που επεξεργάζονται με μη αυτόματο τρόπο, είναι πιθανό να παρέμειναν ανακρίβειες στη βάση δεδομένων που συλλέγεται. Σχεδιάζεται να γίνουν διορθώσεις στο αρχικό σετ με την πάροδο του χρόνου.

Υλοποίηση λογισμικού Η υλοποίηση jquery.inputmask, η οποία αναφέρθηκε πολλές φορές στο Habrahabr, χρησιμοποιήθηκε ως ο πυρήνας της μάσκας εισόδου. Αυτή η προσθήκη αυτή τη στιγμή αναπτύσσεται ενεργά και, επιπλέον, έχει σχεδιαστεί με τέτοιο τρόπο ώστε να είναι αρκετά εύκολο να γράψετε επεκτάσεις για αυτό. Ωστόσο, σε αυτό το πρόβλημα αποδείχθηκε ότι ήταν σχεδόν αδύνατο να γραφτεί μια τέτοια επέκταση. Δεν τροποποίησα ή ξαναέγραψα το αρχικό πρόσθετο για να ταιριάζει στις ανάγκες μου, επειδή... Ο συγγραφέας του συνεχίζει να εργάζεται ενεργά για την επέκταση της λειτουργικότητας, με αποτέλεσμα η εφαρμογή των επεξεργασιών μου να είναι προβληματική. Ως εκ τούτου, έπρεπε να γράψω ένα πρόσθετο πρόσθετο πάνω από τον κύριο πυρήνα, το οποίο παρακολουθεί (συν παρεμποδίζει) τις εξωτερικές επιρροές και κάνει τροποποιήσεις δεδομένων. Για να εφαρμόσουμε τους χειριστές εξωτερικών επιρροών μας πριν από τους χειριστές του κύριου πρόσθετου, χρησιμοποιήσαμε το πρόσθετο βιβλιοθήκης jquery.bind-first. Ταξινόμηση επιτρεπόμενων μάσκας εισόδου Για να επιλέξετε σωστά την καταλληλότερη μάσκα εισόδου, ολόκληρο το σύνολο των μασκών πρέπει πρώτα να ταξινομηθεί σε μια ειδική τρόπος. Κατά την ανάπτυξη κανόνων ταξινόμησης, υιοθετήθηκαν οι ακόλουθες συμβάσεις:

Όλοι οι χαρακτήρες στη μάσκα εισαγωγής χωρίζονται σε 2 τύπους: σημαντικούς χαρακτήρες (στην περίπτωσή μου, αυτό είναι το σύμβολο #, που σημαίνει έναν αυθαίρετο αριθμό και αριθμοί 0-9) και διακοσμητικούς χαρακτήρες (όλοι οι άλλοι).

Μια άλλη διαίρεση χαρακτήρων στη μάσκα εισαγωγής είναι οι χαρακτήρες μπαλαντέρ (στην περίπτωσή μου αυτό είναι το σύμβολο #) και όλοι οι άλλοι.

Το αποτέλεσμα είναι οι ακόλουθοι κανόνες ταξινόμησης με τη σειρά που εφαρμόζονται:

Κατά τη σύγκριση 2 μάσκας εισαγωγής χαρακτήρα προς χαρακτήρα, λαμβάνονται υπόψη μόνο σημαντικοί χαρακτήρες (όχι διακοσμητές).

Οι διαφορετικοί χαρακτήρες μπαλαντέρ αντιμετωπίζονται ως ίσοι και άλλοι σημαντικοί χαρακτήρες συγκρίνονται με βάση τον κώδικά τους.

Τα σύμβολα χωρίς πρότυπο είναι πάντα μικρότερα από τα σύμβολα προτύπου και, ως εκ τούτου, τοποθετούνται ψηλότερα.

Όσο μικρότερο είναι το μήκος σημαντικών χαρακτήρων στη μάσκα εισόδου, τόσο μικρότερη θεωρείται η μάσκα εισόδου και τοποθετείται ψηλότερα.

Εύρεση κατάλληλης μάσκας εισαγωγής Κατά τη σύγκριση του κειμένου εισαγωγής με την επόμενη μάσκα από την ταξινομημένη λίστα, λαμβάνονται υπόψη μόνο οι σημαντικοί χαρακτήρες κάθε μάσκας. Εάν μια γραμμή είναι μεγαλύτερη από μια μάσκα εισόδου, παρόλο που όλοι οι προηγούμενοι χαρακτήρες έχουν περάσει τη δοκιμή, η μάσκα εισαγωγής θεωρείται άκυρη. Εάν το κείμενο εισόδου ταιριάζει με πολλές μάσκες εισόδου, επιστρέφεται η πρώτη. Στη συνέχεια, στη μάσκα που βρέθηκε, όλοι οι σημαντικοί χαρακτήρες (συμπεριλαμβανομένων των μη προτύπων) αντικαθίστανται με ένα πρότυπο, που είναι ένας συνδυασμός όλων των χαρακτήρων που επιτρέπονται από οποιοδήποτε από τα σύμβολα προτύπου. Επεξεργασία και υποκλοπή συμβάντων Προκειμένου να αποφευχθούν συγκρούσεις με Οι χειριστές συμβάντων του κύριου πυρήνα της μάσκας εισόδου, παρεμποδίζονται τα ακόλουθα συμβάντα:

• keydown - πληκτρολογήσεις backspace και διαγραφής παρακολουθούνται για αλλαγή της τρέχουσας μάσκας εισαγωγής προτού ο κύριος χειριστής αφαιρέσει έναν χαρακτήρα από το κείμενο. Επιπλέον, το πάτημα του πλήκτρου Εισαγωγή, το οποίο αλλάζει τη λειτουργία εισαγωγής κειμένου, παρακολουθείται για συγχρονισμό.
• πάτημα πλήκτρων - καθώς ο εισαγόμενος χαρακτήρας ενδέχεται να μην επιτρέπεται από την αρχική μάσκα εισαγωγής (καθώς όλοι οι σημαντικοί χαρακτήρες σε αυτήν αντικαθίστανται από έναν χαρακτήρα μπαλαντέρ), είναι απαραίτητο να ελέγξετε τη νέα γραμμή για να ικανοποιήσετε μία από τις επιτρεπόμενες μάσκες. Εάν δεν υπάρχουν τέτοιες μάσκες, τότε η εισαγωγή χαρακτήρων απορρίπτεται, διαφορετικά, η μάσκα εισαγωγής ενημερώνεται, μετά την οποία το συμβάν μεταβιβάζεται στον χειριστή του πυρήνα.
• επικόλληση , εισαγωγή - επικόλληση κειμένου από το πρόχειρο. Πριν από τη μεταφορά της επεξεργασίας στον πυρήνα, επιλέγεται μια μάσκα εισόδου για τη συμβολοσειρά που προκύπτει από την επικόλληση κειμένου από το πρόχειρο. Εάν δεν μπορεί να βρεθεί η μάσκα εισαγωγής, το κείμενο περικόπτεται χαρακτήρα προς χαρακτήρα από το τέλος μέχρι το κείμενο να ταιριάζει με τουλάχιστον μία μάσκα εισαγωγής. Μια παρόμοια λειτουργία εκτελείται κατά τη διόρθωση κειμένου σε ένα πεδίο εισαγωγής καλώντας τη συνάρτηση val(), καθώς και κατά την προετοιμασία μιας μάσκας εισόδου εάν εφαρμόζεται σε ένα μη κενό πεδίο εισαγωγής.
• dragdrop, η επεξεργασία απόθεσης είναι παρόμοια με το συμβάν επικόλλησης.
• θόλωση - πρόσθετη επεξεργασία σε περίπτωση που η λειτουργία εκκαθάρισης κειμένου είναι ενεργοποιημένη όταν η εστίαση χάνεται εάν δεν ικανοποιεί τη μάσκα εισαγωγής. Αυτό το συμβάν αναχαιτίζεται μετά τον κύριο χειριστή, σε αντίθεση με τα προηγούμενα.

Όλα τα συμβάντα αναρτώνται στο χώρο της μάσκας εισόδου. Αυτό αποφεύγει τη λανθασμένη συμπεριφορά κατά την κλήση της μάσκας εισόδου μετά την προετοιμασία του πρόσθετου (καθώς ο πυρήνας αφαιρεί όλους τους προηγουμένως εγκατεστημένους χειριστές στο χώρο μάσκας εισόδου κατά την προετοιμασία).

Παράδειγμα χρήσης Μορφή λίστας μάσκας Μια λίστα μάσκας είναι ένας πίνακας αντικειμένων JavaScript, κατά προτίμηση με το ίδιο σύνολο ιδιοτήτων. Τουλάχιστον μία ιδιότητα που περιέχει μια μάσκα εισόδου πρέπει να υπάρχει για όλα τα αντικείμενα πίνακα. Το όνομα της παραμέτρου που περιέχει τη μάσκα μπορεί να είναι αυθαίρετο. Παρακάτω είναι ένα τμήμα ενός τέτοιου πίνακα:
[ … ( "μάσκα": "+7(###)###-##-##", "cc": "RU", "name_en": "Russia", "desc_en": "", " name_ru": "Russia", "desc_ru": "" ), ( "μάσκα": "+250(###)###-###", "cc": "RW", "name_en": " Ρουάντα", "desc_en": "", "name_ru": "Rwanda", "desc_ru": "" ), ( "μάσκα": "+966-5-####-####", "cc ": "SA", "name_en": "Saudi Arabia", "desc_en": "mobile", "name_ru": "Saudi Arabia", "desc_ru": "mobile" ), ( "mask": "+966- #-###-####", "cc": "SA", "name_en": "Saudi Arabia", "desc_en": "", "name_ru": "Saudi Arabia", "desc_ru": " " ), … ] Παράμετροι σύνδεσης πρόσθετου Προτού συνδεθείτε, πρέπει να φορτώσετε και να ταξινομήσετε τη λίστα με τις μάσκες. Αυτό γίνεται εκτελώντας την ακόλουθη συνάρτηση:
$.masksSort = συνάρτηση (MaskList, defs, match, key)

• maskList - ένας πίνακας αντικειμένων που αποθηκεύει μάσκες εισόδου (τεμάχιο αντικειμένου βλέπε παραπάνω).
• defs - μια σειρά από χαρακτήρες μπαλαντέρ (στην περίπτωσή μου είναι το σύμβολο #).
• αντιστοίχιση - μια τυπική έκφραση που περιγράφει σημαντικούς χαρακτήρες (στην περίπτωσή μου αυτό είναι /|#/);
• κλειδί είναι το όνομα της παραμέτρου αντικειμένου πίνακα που περιέχει τη μάσκα εισόδου.

Όταν συνδεθεί, δίνεται στο πρόσθετο ένα ειδικό αντικείμενο που περιγράφει τη λειτουργία του. Αυτό το αντικείμενο περιέχει το ακόλουθο σύνολο παραμέτρων:

• inputmask - ένα αντικείμενο που περιέχει παραμέτρους που μεταβιβάζονται στην κύρια προσθήκη μάσκας εισόδου.
• αντιστοίχιση - μια τυπική έκφραση που περιγράφει σημαντικούς χαρακτήρες, εξαιρουμένων των χαρακτήρων μπαλαντέρ.
• αντικατάσταση - χαρακτήρας μπαλαντέρ στον οποίο θα αντικατασταθούν όλοι οι σημαντικοί χαρακτήρες. μπορεί να μην υπάρχει στους ορισμούς αντικείμενο του αντικειμένου μάσκας εισόδου.
• λίστα - μια σειρά αντικειμένων που περιγράφουν μάσκες εισόδου.
• listKey - όνομα της παραμέτρου μέσα στο αντικείμενο που αποθηκεύει τη μάσκα εισόδου.
• onMaskChange - μια συνάρτηση που καλείται όταν ενημερώνεται η μάσκα εισόδου. η πρώτη παράμετρος είναι ένα αντικείμενο από τον πίνακα, η μάσκα εισαγωγής του οποίου αντιστοιχεί στο εισαγόμενο κείμενο και η δεύτερη παράμετρος είναι η ακρίβεια του ορισμού της μάσκας: true - η μάσκα εισόδου ταιριάζει πλήρως, false - επιπλέον χαρακτήρες πρέπει να εισαχθούν με αξιοπιστία ορίστε τη μάσκα.

Για να αρχικοποιήσετε την προσθήκη, πρέπει να εφαρμόσετε τη μέθοδο inputmasks στο πεδίο εισαγωγής:
$.fn.inputmasks = συνάρτηση (maskOpts, λειτουργία)

• maskOpts - ένα αντικείμενο που περιγράφει τη λειτουργία του πρόσθετου.
• λειτουργία - προαιρετική. επί του παρόντος υποστηρίζεται η τιμή isCompleted - ως αποτέλεσμα, η μέθοδος επιστρέφει true εάν το κείμενο που αντιστοιχεί στην αντιστοιχισμένη μάσκα εισαχθεί πλήρως και ψευδές διαφορετικά.

Παράδειγμα σύνδεσης plugin
Μάσκα εισαγωγής var maskList = $.masksSort($.masksLoad("phone-codes.json"), ["#"], /|#/, "μάσκα"); var maskOpts = ( μάσκα εισόδου: ( ορισμοί: ( "#": ( επικυρωτής: "", καρδινικότητα: 1 ) ), //clearIncomplete: true, showMaskOnHover: false, autoUnmask: true ), αντιστοίχιση: //, αντικατάσταση: "# ", list: maskList, listKey: "mask", onMaskChange: function(maskObj, ολοκληρωμένο) ( if (completed) ( var hint = maskObj.name_ru; if (maskObj.desc_ru && maskObj.desc_ru != "") ( hint + = " (" + maskObj.desc_ru + ")"; ) $("#descr").html(hint); ) else ( $("#descr").html("Μάσκα εισαγωγής"); ) $(αυτό ).attr("placeholder", $(this).inputmask("getemptymask")); ) ); $("#phone_mask").change(function() ( if ($("#phone_mask").is(":checked")) ($("#customer_phone").inputmasks(maskOpts); ) else ($ ("#customer_phone").inputmask("+[####################]", maskOpts.inputmask) .attr("placeholder", $("# customer_phone").inputmask("getemptymask")); $("#descr").html("Μάσκα εισαγωγής"); ) )); $("#phone_mask").change(); Επίδειξη Ένα παράδειγμα επίδειξης του αναπτυγμένου πρόσθετου παρουσιάζεται στο

Με την πρώτη ματιά, η απάντηση είναι προφανής: σημειώστε το πεδίο "αριθμός τηλεφώνου" όπως απαιτείται. Αλλά υπάρχουν θέσεις στις οποίες ένας χρήστης μπορεί να εγκαταλείψει τον ιστότοπο λόγω περιττών απαιτούμενων πεδίων. Για παράδειγμα, εφαρμογές, λογισμικό, ιστότοποι για πώληση περιεχομένου. Ωστόσο, οι αριθμοί χρηστών για τέτοια έργα είναι σημαντικοί ως πρόσθετα δεδομένα που καθιστούν δυνατή την αλληλεπίδραση με πιθανούς πελάτες στο μέλλον. Επιπλέον, υπάρχει μια απλή και αποτελεσματική λύση - η χρήση μιας μάσκας εισόδου. Ας το αποδείξουμε με υποθέσεις.

Γιατί χρειάζεστε μια μάσκα εισαγωγής;

Η μάσκα εισαγωγής δείχνει σε ποια μορφή πρέπει να εισαγάγετε δεδομένα στο πεδίο. Για παράδειγμα, εάν ένας χρήστης εισαγάγει έναν αριθμό τηλεφώνου χωρίς κωδικό περιοχής ή αριθμό τηλεφώνου στο πεδίο διεύθυνσης, δεν θα μπορεί να προχωρήσει στην επόμενη επιλογή. Η μάσκα σε φόρμες παρέχει ομοιόμορφη εμφάνιση των δεδομένων που εισάγονται, γεγονός που απλοποιεί την αναζήτηση και τη διαχείριση της βάσης δεδομένων. Σύμφωνα με τις συστάσεις της Netpeak, η μάσκα εισαγωγής αριθμού τηλεφώνου είναι απαραίτητο στοιχείο της φόρμας παραγγελίας στον ιστότοπο. Όπως κάθε πρακτική σύσταση από τους ειδικούς μας, αυτή η διάταξη βασίζεται σε επιτυχημένες περιπτώσεις πελατών.

Δεδομένου ότι ο ιστότοπος ειδικευόταν σε εφαρμογές, το πεδίο για την εισαγωγή αριθμού στον ιστότοπο ήταν προαιρετικό. Για να παρακολουθήσουμε τις αλλαγές στο ποσοστό των πελατών που συμπληρώνουν το πεδίο "τηλέφωνο" στη φόρμα παραγγελίας στον ιστότοπο, χρησιμοποιήσαμε μια προσαρμοσμένη μεταβλητή στο Google Analytics. Τον Φεβρουάριο, κανένας από τους εννέα πελάτες δεν συμπλήρωσε το πεδίο «τηλέφωνο». Τον Μάρτιο, παρουσιάσαμε μια μάσκα εισαγωγής και οι χρήστες άρχισαν να τη συμπληρώνουν. Για την καθαρότητα του πειράματος, το πεδίο έμεινε προαιρετικό και δεν έγιναν άλλες αλλαγές.
Το αποτέλεσμα για τον Μάρτιο ήταν 19 τεύχη με 22 χρήστες να συμπλήρωσαν την αίτηση. Με άλλα λόγια, το 85% των χρηστών που παρήγγειλαν την εφαρμογή άφησαν τον αριθμό τηλεφώνου τους.

Μελέτη περίπτωσης ιστότοπου του κέντρου πληροφοριών: αύξηση του αριθμού των καταχωρήσεων στο πεδίο αριθμών τηλεφώνου κατά 15,4%

Ο ιστότοπος του πελάτη παρέχει υπηρεσίες συγγραφής δοκιμίων, μαθημάτων, διατριβών και άλλων εργασιών. Ο αριθμός τηλεφώνου του χρήστη είναι επιθυμητός για επικοινωνία, αλλά στον ιστότοπο αυτό το πεδίο ήταν προαιρετικό. Ο χρήστης δεν μπορούσε να συμπληρώσει τη φόρμα ή να γράψει κάτι σε αυτό το πεδίο. Ως την πρώτη φορά, στο πρώτο στάδιο ρυθμίσαμε την παρακολούθηση για τη συμπλήρωση του πεδίου «τηλέφωνο» στο Google Analytics. Τον Νοέμβριο, από τις 59 εφαρμογές που άφησαν οι επισκέπτες του ιστότοπου, οι 15 δεν περιείχαν αριθμούς. Δηλαδή, η εταιρεία έλαβε μόνο το 74,6% των υποβληθέντων εντύπων με συμπληρωμένο αριθμό. Στη συνέχεια, προσθέσαμε μια μάσκα εισαγωγής στο πεδίο τηλεφώνου. Τον Δεκέμβριο, ο ιστότοπος έλαβε 60 αιτήσεις. Επιπλέον, μόνο 6 συμπληρωμένες φόρμες δεν περιείχαν τον αριθμό τηλεφώνου του πελάτη. Κατά συνέπεια, το 90% των εντύπων παραγγελίας που υποβλήθηκαν περιείχαν ένα σωστά συμπληρωμένο τηλεφωνικό πεδίο. Κατά τη διάρκεια του μήνα - αύξηση 15,4%, μόνο χάρη στην εισαγωγή μιας μάσκας εισαγωγής αριθμού. Τέλος, μια εσωτερική μελέτη περίπτωσης του πρακτορείου.

Το πεδίο για αριθμούς στη φόρμα παραγγελίας στον ιστότοπο της Netpeak είναι επίσης προαιρετικό. Ωστόσο, οι αριθμοί τηλεφώνου είναι σημαντικοί ώστε οι πελάτες να γνωρίζουν πάντα τον αριθμό και την κατάσταση της αίτησής τους (αποστέλλουμε αυτά τα δεδομένα μέσω SMS), καθώς και για τη βελτιστοποίηση της εργασίας των διαχειριστών λογαριασμών. Η περίοδος πειράματος, όπως και στα προηγούμενα παραδείγματα, είναι δύο μήνες. Ως αποτέλεσμα της εμφάνισης της μάσκας εισαγωγής αριθμού, το ποσοστό των συμπληρωμένων εντύπων αυξήθηκε από 44% σε 83% - κατά 39,4%.
Μετά το πείραμα, εφαρμόσαμε τη μάσκα στον ιστότοπο. Το πεδίο για την εισαγωγή αριθμού παραμένει προαιρετικό. Η αίτηση δεν θα υποβληθεί σε επεξεργασία μόνο εάν εισαχθεί λανθασμένος αριθμός σε αυτό το πεδίο. Σε αυτήν την περίπτωση, τα πρώτα ψηφία στη μάσκα αλλάζουν ανάλογα με τη χώρα στην οποία βρίσκεται ο χρήστης του ιστότοπου. Αν μιλάμε για φόρμα προπαραγγελίας, τότε είναι ενδιαφέρον να γνωρίζουμε πόσο καλύτερης ποιότητας είναι οι εφαρμογές με αριθμούς τηλεφώνου. Πήραμε όλους τους δυνητικούς πελάτες που λάβαμε ποτέ μέσω της φόρμας προπαραγγελίας και υπολογίσαμε το ποσοστό αυτών που μετατράπηκαν σε πελάτες χωρίς και με αριθμό. Ο τελευταίος αποδείχθηκε ο μεγαλύτερος κατά 0,81%.

Συμπέρασμα: εάν ένα άτομο σας αφήσει τον αριθμό του στη φόρμα, αυτό δεν εγγυάται τη μεταφορά κεφαλαίων.

Αν μιλάμε για τη φόρμα προπαραγγελίας, έρχονται στο προσκήνιο οι δυνατότητες επανενεργοποίησης των πελατών, ευκαιρίες που ανοίγονται για εμπόρους οπλισμένους με βάση δεδομένων με προσωπικούς αριθμούς τηλεφώνου χρηστών. Θα μιλήσουμε για επιτυχημένες περιπτώσεις επανενεργοποίησης σε μια από τις νέες μας αναρτήσεις. Στο μεταξύ, σας συμβουλεύουμε να διαβάσετε για τα μέτρα που πρέπει να ληφθούν πριν από οποιαδήποτε ενέργεια με αριθμούς τηλεφώνου στη βάση δεδομένων. Μοιραστείτε στα σχόλια την εμπειρία σας από την εφαρμογή μιας μάσκας εισαγωγής για αριθμούς τηλεφώνου και τις παρατηρήσεις σας σχετικά με την ποιότητα των εισερχόμενων εφαρμογών.

Αυτό το πρόσθετο jQuery σάς επιτρέπει να επιλέξετε αυτόματα την κατάλληλη μάσκα εισαγωγής με βάση την εισαγόμενη αρχή του αριθμού τηλεφώνου. Αυτό σας επιτρέπει να κάνετε την εισαγωγή ενός αριθμού τηλεφώνου σε μια σελίδα ιστότοπου πιο γρήγορη και χωρίς σφάλματα. Επιπλέον, το ανεπτυγμένο πρόσθετο μπορεί να χρησιμοποιηθεί σε άλλες περιοχές, εάν οι κανόνες εισαγωγής μπορούν να αναπαρασταθούν με τη μορφή πολλών μασκών εισαγωγής.

Εισαγωγή Οι τοποθεσίες Web απαιτούν την εισαγωγή πληροφοριών αριθμού τηλεφώνου. Συμβαίνει ότι κάθε χώρα έχει το δικαίωμα να θεσπίσει τους δικούς της κανόνες κλήσης και το μήκος του αριθμού της, με αποτέλεσμα να δημιουργείται περιοδικά σύγχυση μεταξύ κατοίκων διαφορετικών χωρών: ορισμένοι συνηθίζουν να υποδεικνύουν τον αριθμό με το πρώτο ψηφίο 8, άλλοι με ένα πρώτο ψηφίο ψηφίο 0 και άλλα με σύμβολο +. Επανεξέταση υπαρχουσών λύσεων Για να επιλύσετε με κάποιο τρόπο την πολυπλοκότητα και να φέρετε τους αριθμούς σε ενοποιημένη μορφή, υπάρχουν 3 κύριες λύσεις:

Ζητείται από τον χρήστη να εισαγάγει τον αριθμό χρησιμοποιώντας μια μάσκα εισαγωγής. Πλεονέκτημα: Η σαφής εμφάνιση του αριθμού ελαχιστοποιεί πιθανά σφάλματα στον αριθμό. Μειονέκτημα: κάθε χώρα έχει τη δική της ορθογραφία και μήκος αριθμού.

Ο χρήστης καλείται να επιλέξει τη χώρα ξεχωριστά και να εισαγάγει τον υπόλοιπο αριθμό ξεχωριστά. είναι δυνατό με χρήση μάσκας εισόδου. Πλεονέκτημα: η δυνατότητα χρήσης διαφορετικών μασκών εισαγωγής για διαφορετικές χώρες (καθώς και περιοχές εντός μιας χώρας). Μειονεκτήματα: ο κατάλογος των χωρών (και των περιοχών σε κάθε χώρα) μπορεί να είναι μεγάλος. ο αριθμός τηλεφώνου παύει να υπάρχει ως ενιαίο σύνολο (ή απαιτείται προεπεξεργασία πριν από την αποθήκευση και εμφάνιση του αριθμού).

Τοποθετήστε ένα σύμβολο + μπροστά από τον αριθμό (εκτός της εισαγωγής) και επιτρέψτε την εισαγωγή μόνο αριθμών. Πλεονεκτήματα: ευκολία υλοποίησης. Μειονέκτημα: έλλειψη οπτικής απεικόνισης του αριθμού.

Προτεινόμενη λύση Ως αποτέλεσμα, αποφασίστηκε να τροποποιηθεί η συνήθης μάσκα εισαγωγής έτσι ώστε να αλλάζει σύμφωνα με την τρέχουσα τιμή του αριθμού. Επιπλέον, καθώς εισάγετε τον αριθμό, θα σας ζητηθεί να εμφανίσετε το όνομα της αναγνωρισμένης χώρας. Αυτή η προσέγγιση, υποκειμενικά, θα πρέπει να λύσει όλες τις αδυναμίες των λύσεων που αναφέρονται παραπάνω.

Λαμβάνοντας υπόψη το γεγονός ότι ο αριθμός των χωρών στον κόσμο είναι σχετικά μικρός, αποφασίστηκε να καταρτιστεί μια λίστα με μάσκες εισόδου για όλες τις χώρες. Ως πηγή χρησιμοποιήθηκαν πληροφορίες που δημοσιεύτηκαν στον ιστότοπο της Διεθνούς Ένωσης Τηλεπικοινωνιών.

Η συλλογή αυτών των πληροφοριών έφερε πολλές εκπλήξεις. Κατά τη διαδικασία συλλογής πληροφοριών, ήταν απαραίτητο να ληφθούν υπόψη όλες οι πιθανές επιλογές για αριθμούς τηλεφώνου, συμπεριλαμβανομένου του εσωτερικού της χώρας. Ωστόσο, λόγω του μεγάλου όγκου πληροφοριών που επεξεργάζονται με μη αυτόματο τρόπο, είναι πιθανό να παρέμειναν ανακρίβειες στη βάση δεδομένων που συλλέγεται. Σχεδιάζεται να γίνουν διορθώσεις στο αρχικό σετ με την πάροδο του χρόνου.

Υλοποίηση λογισμικού Η υλοποίηση jquery.inputmask, η οποία αναφέρθηκε πολλές φορές στο Habrahabr, χρησιμοποιήθηκε ως ο πυρήνας της μάσκας εισόδου. Αυτή η προσθήκη αυτή τη στιγμή αναπτύσσεται ενεργά και, επιπλέον, έχει σχεδιαστεί με τέτοιο τρόπο ώστε να είναι αρκετά εύκολο να γράψετε επεκτάσεις για αυτό. Ωστόσο, σε αυτό το πρόβλημα αποδείχθηκε ότι ήταν σχεδόν αδύνατο να γραφτεί μια τέτοια επέκταση. Δεν τροποποίησα ή ξαναέγραψα το αρχικό πρόσθετο για να ταιριάζει στις ανάγκες μου, επειδή... Ο συγγραφέας του συνεχίζει να εργάζεται ενεργά για την επέκταση της λειτουργικότητας, με αποτέλεσμα η εφαρμογή των επεξεργασιών μου να είναι προβληματική. Ως εκ τούτου, έπρεπε να γράψω ένα πρόσθετο πρόσθετο πάνω από τον κύριο πυρήνα, το οποίο παρακολουθεί (συν παρεμποδίζει) τις εξωτερικές επιρροές και κάνει τροποποιήσεις δεδομένων. Για να εφαρμόσουμε τους χειριστές εξωτερικών επιρροών μας πριν από τους χειριστές του κύριου πρόσθετου, χρησιμοποιήσαμε το πρόσθετο βιβλιοθήκης jquery.bind-first. Ταξινόμηση επιτρεπόμενων μάσκας εισόδου Για να επιλέξετε σωστά την καταλληλότερη μάσκα εισόδου, ολόκληρο το σύνολο των μασκών πρέπει πρώτα να ταξινομηθεί σε μια ειδική τρόπος. Κατά την ανάπτυξη κανόνων ταξινόμησης, υιοθετήθηκαν οι ακόλουθες συμβάσεις:

Όλοι οι χαρακτήρες στη μάσκα εισαγωγής χωρίζονται σε 2 τύπους: σημαντικούς χαρακτήρες (στην περίπτωσή μου, αυτό είναι το σύμβολο #, που σημαίνει έναν αυθαίρετο αριθμό και αριθμοί 0-9) και διακοσμητικούς χαρακτήρες (όλοι οι άλλοι).

Μια άλλη διαίρεση χαρακτήρων στη μάσκα εισαγωγής είναι οι χαρακτήρες μπαλαντέρ (στην περίπτωσή μου αυτό είναι το σύμβολο #) και όλοι οι άλλοι.

Το αποτέλεσμα είναι οι ακόλουθοι κανόνες ταξινόμησης με τη σειρά που εφαρμόζονται:

Κατά τη σύγκριση 2 μάσκας εισαγωγής χαρακτήρα προς χαρακτήρα, λαμβάνονται υπόψη μόνο σημαντικοί χαρακτήρες (όχι διακοσμητές).

Οι διαφορετικοί χαρακτήρες μπαλαντέρ αντιμετωπίζονται ως ίσοι και άλλοι σημαντικοί χαρακτήρες συγκρίνονται με βάση τον κώδικά τους.

Τα σύμβολα χωρίς πρότυπο είναι πάντα μικρότερα από τα σύμβολα προτύπου και, ως εκ τούτου, τοποθετούνται ψηλότερα.

Όσο μικρότερο είναι το μήκος σημαντικών χαρακτήρων στη μάσκα εισόδου, τόσο μικρότερη θεωρείται η μάσκα εισόδου και τοποθετείται ψηλότερα.

Εύρεση κατάλληλης μάσκας εισαγωγής Κατά τη σύγκριση του κειμένου εισαγωγής με την επόμενη μάσκα από την ταξινομημένη λίστα, λαμβάνονται υπόψη μόνο οι σημαντικοί χαρακτήρες κάθε μάσκας. Εάν μια γραμμή είναι μεγαλύτερη από μια μάσκα εισόδου, παρόλο που όλοι οι προηγούμενοι χαρακτήρες έχουν περάσει τη δοκιμή, η μάσκα εισαγωγής θεωρείται άκυρη. Εάν το κείμενο εισόδου ταιριάζει με πολλές μάσκες εισόδου, επιστρέφεται η πρώτη. Στη συνέχεια, στη μάσκα που βρέθηκε, όλοι οι σημαντικοί χαρακτήρες (συμπεριλαμβανομένων των μη προτύπων) αντικαθίστανται με ένα πρότυπο, που είναι ένας συνδυασμός όλων των χαρακτήρων που επιτρέπονται από οποιοδήποτε από τα σύμβολα προτύπου. Επεξεργασία και υποκλοπή συμβάντων Προκειμένου να αποφευχθούν συγκρούσεις με Οι χειριστές συμβάντων του κύριου πυρήνα της μάσκας εισόδου, παρεμποδίζονται τα ακόλουθα συμβάντα:

• keydown - πληκτρολογήσεις backspace και διαγραφής παρακολουθούνται για αλλαγή της τρέχουσας μάσκας εισαγωγής προτού ο κύριος χειριστής αφαιρέσει έναν χαρακτήρα από το κείμενο. Επιπλέον, το πάτημα του πλήκτρου Εισαγωγή, το οποίο αλλάζει τη λειτουργία εισαγωγής κειμένου, παρακολουθείται για συγχρονισμό.
• πάτημα πλήκτρων - καθώς ο εισαγόμενος χαρακτήρας ενδέχεται να μην επιτρέπεται από την αρχική μάσκα εισαγωγής (καθώς όλοι οι σημαντικοί χαρακτήρες σε αυτήν αντικαθίστανται από έναν χαρακτήρα μπαλαντέρ), είναι απαραίτητο να ελέγξετε τη νέα γραμμή για να ικανοποιήσετε μία από τις επιτρεπόμενες μάσκες. Εάν δεν υπάρχουν τέτοιες μάσκες, τότε η εισαγωγή χαρακτήρων απορρίπτεται, διαφορετικά, η μάσκα εισαγωγής ενημερώνεται, μετά την οποία το συμβάν μεταβιβάζεται στον χειριστή του πυρήνα.
• επικόλληση , εισαγωγή - επικόλληση κειμένου από το πρόχειρο. Πριν από τη μεταφορά της επεξεργασίας στον πυρήνα, επιλέγεται μια μάσκα εισόδου για τη συμβολοσειρά που προκύπτει από την επικόλληση κειμένου από το πρόχειρο. Εάν δεν μπορεί να βρεθεί η μάσκα εισαγωγής, το κείμενο περικόπτεται χαρακτήρα προς χαρακτήρα από το τέλος μέχρι το κείμενο να ταιριάζει με τουλάχιστον μία μάσκα εισαγωγής. Μια παρόμοια λειτουργία εκτελείται κατά τη διόρθωση κειμένου σε ένα πεδίο εισαγωγής καλώντας τη συνάρτηση val(), καθώς και κατά την προετοιμασία μιας μάσκας εισόδου εάν εφαρμόζεται σε ένα μη κενό πεδίο εισαγωγής.
• dragdrop, η επεξεργασία απόθεσης είναι παρόμοια με το συμβάν επικόλλησης.
• θόλωση - πρόσθετη επεξεργασία σε περίπτωση που η λειτουργία εκκαθάρισης κειμένου είναι ενεργοποιημένη όταν η εστίαση χάνεται εάν δεν ικανοποιεί τη μάσκα εισαγωγής. Αυτό το συμβάν αναχαιτίζεται μετά τον κύριο χειριστή, σε αντίθεση με τα προηγούμενα.

Όλα τα συμβάντα αναρτώνται στο χώρο της μάσκας εισόδου. Αυτό αποφεύγει τη λανθασμένη συμπεριφορά κατά την κλήση της μάσκας εισόδου μετά την προετοιμασία του πρόσθετου (καθώς ο πυρήνας αφαιρεί όλους τους προηγουμένως εγκατεστημένους χειριστές στο χώρο μάσκας εισόδου κατά την προετοιμασία).

Παράδειγμα χρήσης Μορφή λίστας μάσκας Μια λίστα μάσκας είναι ένας πίνακας αντικειμένων JavaScript, κατά προτίμηση με το ίδιο σύνολο ιδιοτήτων. Τουλάχιστον μία ιδιότητα που περιέχει μια μάσκα εισόδου πρέπει να υπάρχει για όλα τα αντικείμενα πίνακα. Το όνομα της παραμέτρου που περιέχει τη μάσκα μπορεί να είναι αυθαίρετο. Παρακάτω είναι ένα τμήμα ενός τέτοιου πίνακα:
[ … ( "μάσκα": "+7(###)###-##-##", "cc": "RU", "name_en": "Russia", "desc_en": "", " name_ru": "Russia", "desc_ru": "" ), ( "μάσκα": "+250(###)###-###", "cc": "RW", "name_en": " Ρουάντα", "desc_en": "", "name_ru": "Rwanda", "desc_ru": "" ), ( "μάσκα": "+966-5-####-####", "cc ": "SA", "name_en": "Saudi Arabia", "desc_en": "mobile", "name_ru": "Saudi Arabia", "desc_ru": "mobile" ), ( "mask": "+966- #-###-####", "cc": "SA", "name_en": "Saudi Arabia", "desc_en": "", "name_ru": "Saudi Arabia", "desc_ru": " " ), … ] Παράμετροι σύνδεσης πρόσθετου Προτού συνδεθείτε, πρέπει να φορτώσετε και να ταξινομήσετε τη λίστα με τις μάσκες. Αυτό γίνεται εκτελώντας την ακόλουθη συνάρτηση:
$.masksSort = συνάρτηση (MaskList, defs, match, key)

• maskList - ένας πίνακας αντικειμένων που αποθηκεύει μάσκες εισόδου (τεμάχιο αντικειμένου βλέπε παραπάνω).
• defs - μια σειρά από χαρακτήρες μπαλαντέρ (στην περίπτωσή μου είναι το σύμβολο #).
• αντιστοίχιση - μια τυπική έκφραση που περιγράφει σημαντικούς χαρακτήρες (στην περίπτωσή μου αυτό είναι /|#/);
• κλειδί είναι το όνομα της παραμέτρου αντικειμένου πίνακα που περιέχει τη μάσκα εισόδου.

Όταν συνδεθεί, δίνεται στο πρόσθετο ένα ειδικό αντικείμενο που περιγράφει τη λειτουργία του. Αυτό το αντικείμενο περιέχει το ακόλουθο σύνολο παραμέτρων:

• inputmask - ένα αντικείμενο που περιέχει παραμέτρους που μεταβιβάζονται στην κύρια προσθήκη μάσκας εισόδου.
• αντιστοίχιση - μια τυπική έκφραση που περιγράφει σημαντικούς χαρακτήρες, εξαιρουμένων των χαρακτήρων μπαλαντέρ.
• αντικατάσταση - χαρακτήρας μπαλαντέρ στον οποίο θα αντικατασταθούν όλοι οι σημαντικοί χαρακτήρες. μπορεί να μην υπάρχει στους ορισμούς αντικείμενο του αντικειμένου μάσκας εισόδου.
• λίστα - μια σειρά αντικειμένων που περιγράφουν μάσκες εισόδου.
• listKey - όνομα της παραμέτρου μέσα στο αντικείμενο που αποθηκεύει τη μάσκα εισόδου.
• onMaskChange - μια συνάρτηση που καλείται όταν ενημερώνεται η μάσκα εισόδου. η πρώτη παράμετρος είναι ένα αντικείμενο από τον πίνακα, η μάσκα εισαγωγής του οποίου αντιστοιχεί στο εισαγόμενο κείμενο και η δεύτερη παράμετρος είναι η ακρίβεια του ορισμού της μάσκας: true - η μάσκα εισόδου ταιριάζει πλήρως, false - επιπλέον χαρακτήρες πρέπει να εισαχθούν με αξιοπιστία ορίστε τη μάσκα.

Για να αρχικοποιήσετε την προσθήκη, πρέπει να εφαρμόσετε τη μέθοδο inputmasks στο πεδίο εισαγωγής:
$.fn.inputmasks = συνάρτηση (maskOpts, λειτουργία)

• maskOpts - ένα αντικείμενο που περιγράφει τη λειτουργία του πρόσθετου.
• λειτουργία - προαιρετική. επί του παρόντος υποστηρίζεται η τιμή isCompleted - ως αποτέλεσμα, η μέθοδος επιστρέφει true εάν το κείμενο που αντιστοιχεί στην αντιστοιχισμένη μάσκα εισαχθεί πλήρως και ψευδές διαφορετικά.

Παράδειγμα σύνδεσης plugin
Μάσκα εισαγωγής var maskList = $.masksSort($.masksLoad("phone-codes.json"), ["#"], /|#/, "μάσκα"); var maskOpts = ( μάσκα εισόδου: ( ορισμοί: ( "#": ( επικυρωτής: "", καρδινικότητα: 1 ) ), //clearIncomplete: true, showMaskOnHover: false, autoUnmask: true ), αντιστοίχιση: //, αντικατάσταση: "# ", list: maskList, listKey: "mask", onMaskChange: function(maskObj, ολοκληρωμένο) ( if (completed) ( var hint = maskObj.name_ru; if (maskObj.desc_ru && maskObj.desc_ru != "") ( hint + = " (" + maskObj.desc_ru + ")"; ) $("#descr").html(hint); ) else ( $("#descr").html("Μάσκα εισαγωγής"); ) $(αυτό ).attr("placeholder", $(this).inputmask("getemptymask")); ) ); $("#phone_mask").change(function() ( if ($("#phone_mask").is(":checked")) ($("#customer_phone").inputmasks(maskOpts); ) else ($ ("#customer_phone").inputmask("+[####################]", maskOpts.inputmask) .attr("placeholder", $("# customer_phone").inputmask("getemptymask")); $("#descr").html("Μάσκα εισαγωγής"); ) )); $("#phone_mask").change(); Επίδειξη Ένα παράδειγμα επίδειξης του αναπτυγμένου πρόσθετου παρουσιάζεται στο