Input Mask: шта је то, маске за унос и форматирање

Шта је Input Mask?

Input Mask (маска за унос) — механизам који одређује образац унетих података и аутоматски форматира текст док се куца. Корисник уноси само значајне знакове (цифре, слова), а систем аутоматски додаје раздвајаче: размаке, цртице, заграде, косе црте. Ово је кључна разлика у односу на пост-обраду, где се подаци форматирају након завршетка уноса.

Маске за унос решавају три проблема корисничког искуства. Први — когнитивно оптерећење: корисник не мора да памти формат података и ручно поставља раздвајаче. Други — брзина уноса: аутоматско додавање раздвајача и прелазак на следећу групу знакова убрзава куцање. Трећи — квалитет података: маска гарантује да ће подаци бити прикупљени у јединственом формату без варијација.

За разлику од форматера NSFormatter, који раде на нивоу приказа већ унетих података, Input Mask ради на нивоу уноса: контролише сваки унети знак и одређује да ли је дозвољен на тренутној позицији маске. Ако знак не одговара маски, бива одбијен или игнорисан.

Према Apple UX истраживањима (2024), маске за унос су најефикасније за поља у којима корисник уноси податке у непознатом формату. На пример, СНИЛС (000-000-000 00) или ИНН (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] са раздвајачем у облику тачке или косе црте. За ИНН, СНИЛС и друге идентификаторе примењују се специјализоване маске: ИНН — [000000000000] (12 цифара), СНИЛС — [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, који прима опсег замене и нови низ.

Препоруке за пројектовање маски

Пројектовање маске почиње анализом тога како ће корисник уносити податке. Ако већина корисника зна формат напамет (број телефона), маска треба да буде минимална — само раздвајачи између група. Ако је формат непознат (СНИЛС, ИНН), маска треба да буде информативнија, са афиксом и натписима.

Избегавајте сувишне маске са великим бројем константних знакова. Маска +7 ([000]) [000]-[00]-[00] садржи 7 константних знакова на 10 значајних — то је прихватљиво. Али маска са сувишним раздвајачима, коју корисник стално заобилази, доноси више штете него користи. Ако нисте сигурни у формат — користите слободан унос.

За међународне апликације узмите у обзир да се формат података може разликовати у различитим земљама. Број телефона у САД има формат +1 (XXX) XXX-XXXX, а у Италији — +39 XXX XXX XXXX. Користите приоритетне маске са аутоматском детекцијом земље према коду или омогућите кориснику избор земље пре уноса броја.

Према UX тестирању InputMask, корисници преферирају маске које показују формат пре почетка уноса (путем placeholdera или афикса) и не блокирају унос знакова. Маска треба да буде савет, а не ограничење. Ако корисник уноси знак који не одговара маски, боље му је дозволити да то уради него блокирати унос без објашњења разлога.