Input Mask: ano ito, mga input mask at pag-format

Ano ang Input Mask?

Input Mask (input mask) ay isang mekanismo na tumutukoy sa pattern ng input data at awtomatikong nag-format ng text habang ito ay tina-type. Ang user ay naglalagay lamang ng mga makabuluhang character (mga digit, titik), at ang sistema ay awtomatikong nagdaragdag ng mga separator: mga puwang, gitling, panaklong, slash. Ito ang pangunahing pagkakaiba sa post-processing, kung saan ang data ay na-format pagkatapos makumpleto ang input.

Ang mga input mask ay lumulutas ng tatlong problema ng karanasan ng user. Una — cognitive load: hindi kailangan ng user na tandaan ang format ng data at manu-manong maglagay ng mga separator. Ikalawa — bilis ng input: ang awtomatikong pagdaragdag ng mga separator at paglipat sa susunod na grupo ng character ay nagpapabilis ng pag-type. Ikatlo — kalidad ng data: ginagarantiyahan ng mask na ang data ay makokolekta sa isang pare-parehong format nang walang pagkakaiba-iba.

Hindi tulad ng mga formatter na NSFormatter, na gumagana sa antas ng pagpapakita ng data na nailagay na, ang Input Mask ay gumagana sa antas ng input: kinokontrol nito ang bawat character na inilalagay at tinutukoy kung ito ay pinapayagan sa kasalukuyang posisyon ng mask. Kung ang character ay hindi tumutugma sa mask, ito ay tinatanggihan o binabalewala.

Ayon sa Apple UX research (2024), ang mga input mask ay pinakaepektibo para sa mga field kung saan ang user ay naglalagay ng data sa hindi pamilyar na format. Halimbawa, SNILS (000-000-000 00) o INN (000000000000) — maaaring hindi alam ng user ang eksaktong bilang ng mga digit o lokasyon ng mga separator, at ang mask ay biswal na nagpapakita ng tamang format.

Syntax ng input mask

Syntax ng mask sa InputMask library ay gumagamit ng kumbinasyon ng mga placeholder character at constant character. Ang mga placeholder ay tumutukoy sa uri ng pinapayagang character sa bawat posisyon: 0 o 9 para sa mga digit, A para sa mga titik, _ para sa anumang character. Ang mga constant character ay mga separator na awtomatikong idinaragdag: mga puwang, gitling, panaklong, tuldok, slash.

Mga mandatory at opsyonal na bloke

Mga square bracket [0] ay nagpapahiwatig ng mandatoryong character — dapat maglagay ang user ng digit sa posisyong ito. Mga curly bracket {0} ay nagpapahiwatig ng opsyonal na character — kung laktawan ng user ang bloke, hindi naglalagay ang mask ng mga kaukulang separator. Halimbawa, ang mask [00]{.}[00]{.}[0000] para sa petsa: kung hindi naglagay ng buwan ang user, hindi rin ipinapakita ang separator pagkatapos ng araw.

Affix ng mask

Mga constant character sa labas ng square at curly bracket ay bumubuo ng affix — ang mga ito ay palaging ipinapakita, kahit na walang laman ang field. Halimbawa, sa mask na +7 ([000]) [000]-[00]-[00] ang mga character na +7, (, ), puwang at gitling ay affix at hindi maaaring alisin ng user. Ang affix ay tumutulong sa user na maunawaan ang inaasahang format bago magsimula ang input.

Mga uri ng mask ayon sa gamit

Mga input mask ay inuuri ayon sa uri ng data na kanilang pinaglilingkuran. Ang bawat uri ay may sariling istraktura, bilang ng mga grupo at paglalagay ng mga separator. Ang tamang pagpili ng mask ay kritikal para sa karanasan ng user — kung ang mask ay hindi tumutugma sa inaasahan ng user, tatanggalin niya ang mga awtomatikong idinagdag na character.

Mga mask para sa numero ng telepono

Mga mask ng telepono — ang pinakakaraniwang uri. Ang numerong Ruso ay nai-format bilang +7 ([000]) [000]-[00]-[00], ang Amerikano bilang +1 ([000]) [000]-[0000]. Dapat suportahan ng mask ang iba't ibang bilang ng digit sa country code at city code. Ang InputMask library ay sumusuporta sa priority mask: kung hindi tugma ang unang mask (naglagay ang user ng code ng ibang bansa), ang pangalawa ay inilalapat.

Mga mask para sa bank card

Para sa numero ng card ginagamit ang mask na [0000] [0000] [0000] [0000] na may mga puwang sa pagitan ng mga grupo ng 4 na digit. Bukod pa rito, maaaring ilapat ang mask para sa petsa ng pag-expire [00]/[00] at CVV code [000]. Ang mask para sa numero ng card ay sumusuporta sa 16–19 digit depende sa sistema ng pagbabayad: Visa at Mastercard — 16 digit, American Express — 15, Maestro — 12–19.

Mga mask para sa petsa at code

Mga mask ng petsa ay gumagamit ng format na [00]{.}[00]{.}[0000] na may separator na tuldok o slash. Para sa INN, SNILS at iba pang identifier, inilalapat ang mga espesyal na mask: INN — [000000000000] (12 digit), SNILS — [000]-[000]-[000] [00] (11 digit na may mga gitling). Para sa verification code — [0000] o [000000] depende sa haba.

Pagpapatupad ng mask sa Swift

Pagpapatupad ng mask sa Swift ay ginagawa sa pamamagitan ng pag-set ng UITextFieldDelegate delegate gamit ang InputMask library. Ang library ay nagbibigay ng klase na MaskedTextFieldDelegate na kumokonekta sa text field at awtomatikong nag-format ng input ayon sa tinukoy na mask.

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]"
        )
    }
}

Para sa numero ng telepono na may awtomatikong pagtukoy ng bansa, gumamit ng priority mask. Ang MaskedTextFieldDelegate ay sumusuporta sa array ng mga mask: ang unang tugma ay inilalapat. Kung maglagay ang user ng code na +1, inilalapat ang format ng Amerika, kung +7 — format ng Russia.

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

Para sa petsa na may opsyonal na bloke gumamit ng curly bracket. Kung ang user ay naglalagay lamang ng araw, ang mask ay ipinapakita bilang „21". Kung naglalagay ng araw at buwan — „21.07". Kung lahat ng tatlong bahagi — „21.07.2026". Ang mga opsyonal na bloke ay ginagawang adaptive ang mask at hindi pinipilit ang user na maglagay ng data na ayaw ibigay.

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

Pamamahala ng pag-paste at pagtanggal

Tamang pamamahala ng pag-paste — isa sa pinakamahirap na aspeto ng pagpapatupad ng input mask. Kapag nag-paste ng text (halimbawa, numero ng card mula sa clipboard), dapat alisin ng library ang lahat ng separator mula sa nai-paste na text, kunin lamang ang mga makabuluhang character, at ilapat ang mask sa malinis na data. Ang InputMask mula sa RedMadRobot ay awtomatikong ginagawa ito sa pamamagitan ng method na shouldChangeCharactersIn.

Kapag nag-paste ng naka-format na text (may mga puwang o gitling), unang ni-normalize ng library ang data: inaalis ang lahat ng character na hindi tugma sa pattern ng mask, pagkatapos ay inilalapat ang mask sa na-normalize na string. Kung ang nai-paste na text ay naglalaman ng mga hindi pinapayagang character (mga titik sa numeric mask), ang mga ito ay binabalewala.

Ang pamamahala ng pagtanggal (backspace) sa mask ay nangangailangan ng espesyal na atensyon. Kapag pinindot ang backspace, dapat tanggalin ng mask ang huling makabuluhang character, hindi ang constant separator. Kung ang cursor ay nasa likod ng constant character, dapat itong laktawan ng backspace at tanggalin ang nakaraang makabuluhang character. Ipinapatupad ng InputMask ang pag-uugaling ito sa pamamagitan ng isang stack ng mga inilagay na character.

Para sa pagpili at pagpapalit ng text, dapat tamang hawakan ng mask ang mga sitwasyon kung saan pinipili ng user ang bahagi ng text at pinapalitan ito ng bago. Sinusuportahan ito ng InputMask library sa pamamagitan ng method na modifyString sa MaskedTextFieldDelegate na tumatanggap ng hanay ng pagpapalit at bagong string.

Mga rekomendasyon sa pagdidisenyo ng mask

Pagdidisenyo ng mask ay nagsisimula sa pagsusuri kung paano maglalagay ng data ang user. Kung karamihan sa mga user ay alam ang format sa pamamagitan ng memorya (numero ng telepono), ang mask ay dapat minimal — mga separator lamang sa pagitan ng mga grupo. Kung ang format ay hindi pamilyar (SNILS, INN), ang mask ay dapat mas informative, na may affix at mga label.

Iwasan ang labis na mask na may maraming constant character. Ang mask na +7 ([000]) [000]-[00]-[00] ay naglalaman ng 7 constant character sa 10 makabuluhang — ito ay katanggap-tanggap. Ngunit ang mask na may labis na separator na patuloy na iniiwasan ng user ay nagdudulot ng higit na pinsala kaysa benepisyo. Kung nagdududa ka sa format — gumamit ng libreng input.

Para sa mga internasyonal na aplikasyon isaalang-alang na ang format ng data ay maaaring magkaiba sa iba't ibang bansa. Ang numero ng telepono sa US ay may format na +1 (XXX) XXX-XXXX, at sa Italy — +39 XXX XXX XXXX. Gumamit ng priority mask na may awtomatikong pagtukoy ng bansa ayon sa code o bigyan ang user ng pagpili ng bansa bago maglagay ng numero.

Ayon sa UX testing ng InputMask, mas gusto ng mga user ang mga mask na nagpapakita ng format bago magsimula ang input (sa pamamagitan ng placeholder o affix) at hindi hinaharangan ang pag-input ng character. Ang mask ay dapat maging gabay, hindi isang paghihigpit. Kung maglalagay ang user ng character na hindi tugma sa mask, mas mabuting payagan ito kaysa harangan ang input nang hindi ipinapaliwanag ang dahilan.