Input Mask: τι είναι, μάσκες εισόδου και μορφοποίηση

Τι είναι το Input Mask;

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

Οι μάσκες εισόδου λύνουν τρία προβλήματα της εμπειρίας χρήστη. Πρώτο — γνωσιακό φορτίο: ο χρήστης δεν χρειάζεται να θυμάται τη μορφή δεδομένων και να τοποθετεί χειροκίνητα διαχωριστικά. Δεύτερο — ταχύτητα εισόδου: η αυτόματη προσθήκη διαχωριστικών και η μετάβαση στην επόμενη ομάδα χαρακτήρων επιταχύνει την πληκτρολόγηση. Τρίτο — ποιότητα δεδομένων: η μάσκα εγγυάται ότι τα δεδομένα θα συλλεχθούν σε ομοιόμορφη μορφή χωρίς παραλλαγές.

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

Σύμφωνα με έρευνες UX της Apple (2024), οι μάσκες εισόδου είναι πιο αποτελεσματικές για πεδία όπου ο χρήστης εισάγει δεδομένα σε άγνωστη μορφή. Για παράδειγμα, SNILS (000-000-000 00) ή INN (000000000000) — ο χρήστης μπορεί να μην γνωρίζει τον ακριβή αριθμό ψηφίων ή τη θέση των διαχωριστικών, και η μάσκα δείχνει οπτικά τη σωστή μορφή.

Σύνταξη μάσκας εισόδου

Σύνταξη μάσκας στη βιβλιοθήκη InputMask χρησιμοποιεί συνδυασμό χαρακτήρων-τοποθετητών και σταθερών χαρακτήρων. Οι τοποθετητές καθορίζουν τον τύπο επιτρεπόμενου χαρακτήρα σε κάθε θέση: 0 ή 9 για ψηφία, A για γράμματα, _ για οποιονδήποτε χαρακτήρα. Οι σταθεροί χαρακτήρες είναι διαχωριστικά που προστίθενται αυτόματα: κενά, παύλες, παρενθέσεις, τελείες, κάθετες.

Υποχρεωτικά και προαιρετικά μπλοκ

Οι αγκύλες [0] υποδηλώνουν υποχρεωτικό χαρακτήρα — ο χρήστης πρέπει να εισάγει ψηφίο σε αυτή τη θέση. Τα άγκιστρα {0} υποδηλώνουν προαιρετικό χαρακτήρα — αν ο χρήστης παραλείψει το μπλοκ, η μάσκα δεν εισάγει τα αντίστοιχα διαχωριστικά. Για παράδειγμα, η μάσκα [00]{.}[00]{.}[0000] για ημερομηνία: αν ο χρήστης δεν εισάγει μήνα, το διαχωριστικό μετά την ημέρα δεν εμφανίζεται.

Επίθημα μάσκας

Οι σταθεροί χαρακτήρες εκτός αγκυλών και άγκιστρων αποτελούν το επίθημα — εμφανίζονται πάντα, ακόμα κι αν το πεδίο είναι κενό. Για παράδειγμα, στη μάσκα +7 ([000]) [000]-[00]-[00] οι χαρακτήρες +7, (, ), κενό και παύλα είναι επίθημα και δεν μπορούν να αφαιρεθούν από τον χρήστη. Το επίθημα βοηθά τον χρήστη να κατανοήσει την αναμενόμενη μορφή πριν από την έναρξη εισόδου.

Τύποι μασκών ανά προορισμό

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

Μάσκες για αριθμούς τηλεφώνου

Οι τηλεφωνικές μάσκες — ο πιο διαδεδομένος τύπος. Ο ρωσικός αριθμός μορφοποιείται ως +7 ([000]) [000]-[00]-[00], ο αμερικανικός ως +1 ([000]) [000]-[0000]. Η μάσκα πρέπει να υποστηρίζει διαφορετικό αριθμό ψηφίων στον κωδικό χώρας και πόλης. Η βιβλιοθήκη InputMask υποστηρίζει μάσκες προτεραιότητας: αν η πρώτη μάσκα δεν ταιριάζει (ο χρήστης εισήγαγε κωδικό άλλης χώρας), εφαρμόζεται η δεύτερη.

Μάσκες για τραπεζικές κάρτες

Για αριθμούς καρτών χρησιμοποιείται η μάσκα [0000] [0000] [0000] [0000] με κενά μεταξύ ομάδων των 4 ψηφίων. Επιπλέον, μπορεί να εφαρμοστεί μάσκα για ημερομηνία λήξης [00]/[00] και κωδικό CVV [000]. Η μάσκα για αριθμό κάρτας υποστηρίζει 16–19 ψηφία ανάλογα με το σύστημα πληρωμών: Visa και Mastercard — 16 ψηφία, American Express — 15, Maestro — 12–19.

Μάσκες για ημερομηνίες και κωδικούς

Οι μάσκες ημερομηνιών χρησιμοποιούν τη μορφή [00]{.}[00]{.}[0000] με διαχωριστικό τελεία ή κάθετο. Για INN, SNILS και άλλους αναγνωριστικούς αριθμούς εφαρμόζονται εξειδικευμένες μάσκες: INN — [000000000000] (12 ψηφία), SNILS — [000]-[000]-[000] [00] (11 ψηφία με παύλες). Για κωδικούς επιβεβαίωσης — [0000] ή [000000] ανάλογα με το μήκος.

Υλοποίηση μάσκας σε Swift

Η υλοποίηση μάσκας σε Swift γίνεται με ρύθμιση του εκπροσώπου UITextFieldDelegate χρησιμοποιώντας τη βιβλιοθήκη InputMask. Η βιβλιοθήκη παρέχει την κλάση MaskedTextFieldDelegate, η οποία συνδέεται στο πεδίο κειμένου και μορφοποιεί αυτόματα την είσοδο σύμφωνα με την καθορισμένη μάσκα.

import InputMask

class PaymentViewController: UIViewController {

    @IBOutlet var cardField: UITextField!
    @IBOutlet var dateField: UITextField!
    @IBOutlet var cvvField: UITextField!

    var cardListener: MaskedTextFieldDelegate!

    override func viewDidLoad() {
        super.viewDidLoad()
        cardListener = MaskedTextFieldDelegate()
        cardListener.primaryMaskFormat = "[0000] [0000] [0000] [0000]"
        cardField.delegate = cardListener
        dateField.delegate = MaskedTextFieldDelegate(
            primaryMaskFormat: "[00]/[00]"
        )
        cvvField.delegate = MaskedTextFieldDelegate(
            primaryMaskFormat: "[000]"
        )
    }
}

Για αριθμούς τηλεφώνου με αυτόματη αναγνώριση χώρας χρησιμοποιήστε μάσκες προτεραιότητας. Το MaskedTextFieldDelegate υποστηρίζει πίνακα μασκών: η πρώτη που ταιριάζει εφαρμόζεται. Αν ο χρήστης εισάγει κωδικό +1, εφαρμόζεται η αμερικανική μορφή, αν +7 — η ρωσική.

let phoneListener = MaskedTextFieldDelegate()
phoneListener.primaryMaskFormat = "+7 ([000]) [000]-[00]-[00]"
phoneListener.affinityMask = [
    "+1 ([000]) [000]-[0000]",
    "+44 [000] [000] [0000]",
    "+49 [000] [0000] [0000]"
]

Για ημερομηνία με προαιρετικά μπλοκ χρησιμοποιήστε άγκιστρα. Αν ο χρήστης εισάγει μόνο ημέρα, η μάσκα εμφανίζεται ως „21". Αν εισάγει ημέρα και μήνα — „21.07". Αν και τα τρία στοιχεία — „21.07.2026". Τα προαιρετικά μπλοκ καθιστούν τη μάσκα προσαρμοστική και δεν αναγκάζουν τον χρήστη να εισάγει δεδομένα που δεν θέλει να παρέχει.

let dateListener = MaskedTextFieldDelegate(
    primaryMaskFormat: "[00]{.}[00]{.}[0000]"
)
dateField.delegate = dateListener

Χειρισμός επικόλλησης και διαγραφής

Ο σωστός χειρισμός επικόλλησης — μία από τις πιο περίπλοκες πτυχές υλοποίησης μάσκας εισόδου. Κατά την επικόλληση κειμένου (π.χ., αριθμού κάρτας από το πρόχειρο), η βιβλιοθήκη πρέπει να αφαιρέσει όλα τα διαχωριστικά από το επικολλημένο κείμενο, να εξάγει μόνο σημαντικούς χαρακτήρες και να εφαρμόσει τη μάσκα στα καθαρά δεδομένα. Το InputMask από τη RedMadRobot το κάνει αυτόματα μέσω της μεθόδου shouldChangeCharactersIn.

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

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

Για επιλογή και αντικατάσταση κειμένου, η μάσκα πρέπει να χειρίζεται σωστά καταστάσεις όπου ο χρήστης επιλέγει μέρος του κειμένου και το αντικαθιστά με νέο. Η βιβλιοθήκη InputMask το υποστηρίζει μέσω της μεθόδου modifyString στο MaskedTextFieldDelegate, η οποία λαμβάνει το εύρος αντικατάστασης και τη νέα συμβολοσειρά.

Συστάσεις για σχεδιασμό μασκών

Ο σχεδιασμός μάσκας ξεκινά με ανάλυση του τρόπου με τον οποίο ο χρήστης θα εισάγει δεδομένα. Αν οι περισσότεροι χρήστες γνωρίζουν τη μορφή από μνήμης (αριθμός τηλεφώνου), η μάσκα πρέπει να είναι ελάχιστη — μόνο διαχωριστικά μεταξύ ομάδων. Αν η μορφή είναι άγνωστη (SNILS, INN), η μάσκα πρέπει να είναι πιο πληροφοριακή, με επίθημα και ετικέτες.

Αποφύγετε υπερβολικές μάσκες με μεγάλο αριθμό σταθερών χαρακτήρων. Η μάσκα +7 ([000]) [000]-[00]-[00] περιέχει 7 σταθερούς χαρακτήρες σε 10 σημαντικούς — αυτό είναι αποδεκτό. Αλλά μια μάσκα με υπερβολικά διαχωριστικά που ο χρήστης παρακάμπτει συνεχώς κάνει περισσότερο κακό παρά καλό. Αν αμφιβάλλετε για τη μορφή — χρησιμοποιήστε ελεύθερη είσοδο.

Για διεθνείς εφαρμογές λάβετε υπόψη ότι η μορφή δεδομένων μπορεί να διαφέρει σε διαφορετικές χώρες. Ο αριθμός τηλεφώνου στις ΗΠΑ έχει μορφή +1 (XXX) XXX-XXXX, και στην Ιταλία — +39 XXX XXX XXXX. Χρησιμοποιήστε μάσκες προτεραιότητας με αυτόματη αναγνώριση χώρας βάσει κωδικού ή δώστε στο χρήστη τη δυνατότητα επιλογής χώρας πριν από την εισαγωγή του αριθμού.

Σύμφωνα με δοκιμές UX του InputMask, οι χρήστες προτιμούν μάσκες που δείχνουν τη μορφή πριν από την έναρξη εισόδου (μέσω placeholder ή επιθήματος) και δεν μπλοκάρουν την εισαγωγή χαρακτήρων. Η μάσκα πρέπει να είναι υπόδειξη, όχι περιορισμός. Αν ο χρήστης εισάγει χαρακτήρα που δεν αντιστοιχεί στη μάσκα, καλύτερα να του επιτραπεί παρά να μπλοκαριστεί η είσοδος χωρίς εξήγηση του λόγου.