Πώς να δημιουργήσετε έναν απλό επιλογέα τηλεφώνου
Τηλεφωνικοί αριθμοί, εκτός από τα ονόματα και τα μηνύματα ηλεκτρονικού ταχυδρομείου, είναι τα πιο συχνά χρησιμοποιούμενα στοιχεία επικοινωνίας σε ηλεκτρονικές φόρμες. Τα πεδία τηλεφωνικού αριθμού σχεδιάζονται συνήθως με τρόπο που απαιτεί από τους χρήστες να πληκτρολογούν τους αριθμούς χρησιμοποιώντας τα πληκτρολόγιά τους. Αυτή η μέθοδος συχνά οδηγεί σε ανακριβή εισαγωγή δεδομένων.
Προς το μειώστε τα σφάλματα εισόδου του χρήστη και να βελτιώσετε την εμπειρία των χρηστών του ιστότοπού σας, μπορείτε να δημιουργήσετε ένα GUI που επιτρέπει στους χρήστες να εισάγουν γρήγορα τον αριθμό τηλεφώνου τους, με τρόπο παρόμοιο με τους συλλέκτες ημερομηνίας.
Σε αυτό το σεμινάριο, θα δείτε πώς να προσθέστε έναν απλό επιλογέα αριθμού τηλεφώνου σε ένα πεδίο εισαγωγής. Θα χρησιμοποιήσουμε HTML5, CSS3 και JavaScript για να φτάσουμε στο GUI που μπορείτε να δείτε και να δοκιμάσετε στην παρακάτω επίδειξη. Θα χρησιμοποιήσουμε επίσης τακτικές εκφράσεις για να βεβαιωθείτε ότι οι χρήστες εισάγουν έναν έγκυρο αριθμό τηλεφώνου.
1. Δημιουργήστε το πεδίο Αριθμός τηλεφώνου
Πρώτα, δημιουργήστε ένα πεδίο εισαγωγής με ένα εικονίδιο κλήσης στα δεξιά που θα ανοίξει την οθόνη κλήσης με κλικ. Το εικονίδιο κλήσης μοιάζει ακριβώς με 9 μαύρα κουτιά, διατεταγμένα 3 με 3, πρέπει να αρέσει αυτό που βλέπετε σε ένα κανονικό τηλέφωνο.
Χρησιμοποιώ το τηλ για τη σωστή ερμηνεία HTML5, αλλά μπορείτε επίσης να χρησιμοποιήσετε το κείμενο εισάγετε τον τύπο εισόδου εάν θέλετε.
2. Δημιουργήστε την οθόνη κλήσης
ο οθόνη κλήσης είναι ένα πλέγμα αριθμών από 0 έως 9 συν ορισμένους ειδικούς χαρακτήρες. Μπορεί να γίνει με είτε HTML Εδώ, θα σας δείξω πώς να δημιουργήσετε τον πίνακα οθόνης κλήσης στο JavaScript. Μπορείτε, φυσικά, να προσθέσετε τον πίνακα απευθείας στον πηγαίο κώδικα HTML αν προτιμάτε αυτόν τον τρόπο. Αρχικά, δημιουργήστε ένα νέο Πρόσθεσε ένα Τα δύο Η τελευταία σειρά είναι διαφορετική, καθώς αποτελείται από δύο ειδικούς χαρακτήρες, Για να δημιουργήσετε την τελευταία γραμμή στην οθόνη κλήσης, προσθέστε τα παρακάτω ο η οθόνη κλήσης έχει ολοκληρωθεί, προσθέστε το στο Για να γίνει πιο ελκυστική, στυλ της οθόνης κλήσης με CSS. Δεν χρειάζεται απαραιτήτως να κολλήσετε με το στυλ μου, αλλά μην το ξεχνάτε προσθέτω Πρώτα, προσθέστε το Στη συνέχεια, προσθέστε ένα χειριστήριο συμβάντων κλικ στο εικονίδιο κλήσης με JavaScript προς το εναλλαγή της ορατότητας της οθόνης κλήσης. Για να το κάνετε αυτό, πρέπει να χρησιμοποιήσετε τα προαναφερθέντα ο Προσθέστε μια προσαρμοσμένη λειτουργία εισάγει τα ψηφία στο πεδίο αριθμού τηλεφώνου στο κλικ των κελιών της οθόνης επιλογής. ο Τώρα, έχετε ένα οθόνη εργασίας για να εισάγετε πεδίο αριθμού τηλεφώνου. Για να συνεχίσετε με το CSS, αλλάξτε το χρώμα φόντου των ψηφίων στο δικό τους Πρόσθεσε ένα απλή επικύρωση επανεξέτασης για την επικύρωση του αριθμού τηλεφώνου ενώ ο χρήστης εισάγει τα ψηφία στο πεδίο εισαγωγής. Σύμφωνα με τους κανόνες επικύρωσης που χρησιμοποιώ, ο αριθμός τηλεφώνου μπορεί να ξεκινήσει μόνο με ένα ψηφίο ή με το Μπορείτε να δείτε την απεικόνιση της κανονικής έκφρασής μου στην παρακάτω προβολή οθόνης που δημιουργήθηκε με την εφαρμογή Debuggex. Μπορείτε επίσης να επικυρώσετε τον αριθμό τηλεφώνου σύμφωνα με τη μορφή τηλεφώνου της χώρας ή της περιοχής σας. Δημιουργήστε ένα νέο αντικείμενο Κανονικής έκφρασης και αποθηκεύστε το στο Όταν η είσοδος δεν επικυρωθεί, το Είμαι προσθέτοντας ένα κόκκινο περίγραμμα στο πεδίο εισαγωγής όταν η είσοδος δεν είναι έγκυρη, αλλά μπορείτε να ενημερώσετε τον χρήστη με άλλους τρόπους, για παράδειγμα, με μηνύματα σφάλματος. ο Σημειώστε ότι πρόσθεσα επίσης ένα πρόσθετη επικύρωση για μέγιστο αριθμό χαρακτήρων (δεν μπορεί να είναι μεγαλύτερη από 15) χρησιμοποιώντας ένα Τα δικα σου επιλογή αριθμού τηλεφώνου είναι πλέον έτοιμο, ελέγξτε την τελική επίδειξη παρακάτω. ή JavaScript.
'τραπέζι' στοιχείο στο DOM χρησιμοποιώντας το createElement () μέθοδος. Επίσης δώστε το 'καντράν' αναγνωριστικό. / * Δημιουργία οθόνης dial * / var dial = document.createElement ('table'); dial.id = 'dial'; Για βρόχος για να εισαγάγετε μαζί του τις τέσσερις σειρές του πίνακα. Στη συνέχεια, για κάθε σειρά, τρέξτε άλλο Για βρόχος για να προσθέσετε τρία κελιά ανά σειρά. Σημειώστε κάθε κελί με το 'dialDigit' τάξη. για (var rowNum = 0; rowNum < 4; rowNum++) var row = dial.insertRow(rowNum); for (var colNum = 0; colNum < 3; colNum++) var cell = row.insertCell(colNum); cell.className = 'dialDigit'; cell.textContent = ((colNum + 1) + (rowNum * 3)).toString();
Για Οι βρόχοι παραπάνω υπολογίζουν τα ψηφία που εισέρχονται στα κελιά του πίνακα - οι τιμές του cell.textContent ιδιοκτησίας - με τον ακόλουθο τρόπο: (0 + 3) = 1 (1 + 1) + (0 * 3) = 2 (2 + 1) 0 * 3) = 3 / * δεύτερη σειρά * / (0 + 1) + (1 * 3) = 4 (1 + 1) + (1 * 3) = 5 (2 + 6 / * κ.λπ. * /
- και + που χρησιμοποιούνται σε μορφές αριθμών τηλεφώνου για τον εντοπισμό περιφερειακών κωδικών και το ψηφίο 0.αν δήλωση προς την εσωτερική Για βρόχος. για (var rowNum = 0; rowNum < 4; rowNum++) var row = dial.insertRow(rowNum); for (var colNum = 0; colNum < 3; colNum++) /* if last row */ if (rowNum === 3) cell = row.insertCell(colNum); cell.textContent = '-'; cell.className = 'dialDigit'; cell = row.insertCell(colNum); cell.textContent = '0'; cell.className = 'dialDigit'; cell = row.insertCell(colNum); cell.textContent = '+'; cell.className = 'dialDigit'; break; cell = row.insertCell(colNum); cell.className = 'dialDigit'; cell.textContent = ((colNum + 1) + (rowNum * 3)).toString();
#dialWrapper Το δοχείο HTML που δημιουργήσατε στο Βήμα 1 χρησιμοποιώντας δύο μεθόδους DOM:querySelector () Μέθοδος για επιλέξτε το δοχείοappendChild () Μέθοδος για προσαρτήστε την οθόνη κλήσης - που κρατούνται στο καντράν μεταβλητή - στο δοχείο document.querySelector ('# dialWrapper') appendChild (dial). 
3. Στυλ της Οθόνης κλήσης
user-select: κανένας; ιδιοκτησία στο #καντράν δοχείο έτσι ώστε ενώ ο χρήστης κάνει κλικ στα ψηφία, το κείμενο δεν θα επιλεγεί από τον κέρσορα. #dial width: 200px; ύψος: 200px; σύνορα-κατάρρευση: κατάρρευση; κείμενο-ευθυγράμμιση: κέντρο; θέση: σχετική. -ms-user-select: κανένας; -webkit-user-select: κανένας; -moz-user-select: κανένας; user-select: κανένας; χρώμα: # 000; κουτί-σκιά: 0 0 6px # 999; .dialDigit border: 1px solid #fff; δρομέας: δείκτης; Χρώμα φόντου: rgba (255,228,142, .7);
4. Εμφανίστε την Οθόνη κλήσης στο Κλικ
ορατότητα: κρυφή στυλ κανόνα σε #καντράν στο παραπάνω CSS προς το απόκρυψη της οθόνης κλήσης από προεπιλογή. θα εμφανίζεται μόνο όταν ο χρήστης κάνει κλικ στο εικονίδιο κλήσης.querySelector () και το addEventListener () μεθόδων. Το τελευταίο αποδίδει ένα συμβάν κλικ στο εικονίδιο κλήσης και καλεί το προσαρμοσμένο toggleDial () λειτουργία.toggleDial () λειτουργία αλλάζει την ορατότητα της οθόνης κλήσης από κρυφή προς ορατή και πίσω. document.querySelector ('# dialIcon'). addEventListener ('κλικ', toggleDial); λειτουργία toggleDial () dial.style.visibility = dial.style.visibility === 'κρυφό' || dial.style.visibility === ";" visible ": 'κρυφό'; 5. Προσθέστε τη λειτουργικότητα
dialNumber () λειτουργία προσαρτά τα ψηφία ένα προς ένα στο textContent ιδιότητα του πεδίου εισαγωγής που σημειώνεται με το #phoneΌχι αναγνωριστικό. phoneNo = document.querySelector ('#phoneNo'); συνάρτηση dialNumber () phoneNo.value + = this.textContent; dialDigits = document.querySelectorAll ('dialDigit'); για (var i = 0 · i < dialDigits.length; i++) dialDigits[i].addEventListener('click', dialNumber); :φτερουγίζω και :ενεργός (όταν ο χρήστης κάνει κλικ σε αυτό) αναφέρει. .dialDigit: hover φόντο-χρώμα: rgb (255,228,142); .dialDigit: ενεργό χρώμα φόντου: # FF6478;
6. Προσθέστε την επικύρωση της κανονικής έκφρασης
+ χαρακτήρας, και να αποδεχθεί το - χαρακτήρα μετά.
πρότυπο μεταβλητός. Επίσης, δημιουργήστε ένα έθιμο επικυρώνω() λειτουργία που ελέγχει αν ο εισαγόμενος αριθμός τηλεφώνου συμμορφώνεται με την κανονική έκφραση, και αν είναι τουλάχιστον 8 χαρακτήρες.επικυρώνω() πρέπει να λειτουργήσει δώστε ανατροφοδότηση στο χρήστη. πρότυπο = νέο RegExp ("^ (\\ + \\ d 1,2); (\\ d + \\ - * \\ d +) * $"); (txt) // τουλάχιστον 8 χαρακτήρες για ένα έγκυρο αριθμό τηλεφώνου. αν (! pattern.test (txt) || txt.length < 8) phoneNo.style.border = '2px solid red'; return false; else phoneNo.style.border = 'initial'; return true; 7. Εκτελέστε την Επικύρωση
επικυρώνω() λειτουργίες πρέπει να καλείται προκειμένου να γίνει η επικύρωση. Καλέστε το από το dialNumber () που δημιουργήσατε στο Βήμα 5 για να επικυρώσετε την τιμή του phoneNo μεταβλητός.αν δήλωση. συνάρτηση dialNumber () var val = phoneNo.value + this.textContent; // μέγιστοι επιτρεπόμενοι χαρακτήρες, 15 αν (μήκος κύματος> 15) επιστρέφουν ψευδείς. επικύρωση (val); phoneNo.value = val;
