Input Mask: nedir, giriş maskeleri ve biçimlendirme

Giriş Maskesi Nedir?

Input Mask (giriş maskesi), girilen veriler için bir şablon tanımlayan ve yazıldıkça metni otomatik olarak biçimlendiren bir mekanizmadır. Kullanıcı yalnızca önemli karakterleri (rakamlar, harfler) girer ve sistem otomatik olarak ayırıcılar ekler: boşluklar, kısa çizgiler, parantezler, eğik çizgiler. Bu, verilerin giriş tamamlandıktan sonra biçimlendirildiği son işlemeden temel farktır.

Giriş maskeleri, kullanıcı deneyiminin üç sorununu çözer. Birincisi — bilişsel yük: kullanıcının veri biçimini hatırlaması ve manuel olarak ayırıcılar koyması gerekmez. İkincisi — giriş hızı: ayırıcıların otomatik eklenmesi ve sonraki karakter grubuna geçiş yazmayı hızlandırır. Üçüncüsü — veri kalitesi: maske, verilerin varyasyon olmadan tek tip bir biçimde toplanmasını garanti eder.

Zaten girilmiş verilerin görüntüleme düzeyinde çalışan NSFormatter biçimlendiricilerinin aksine, giriş maskesi giriş düzeyinde çalışır: girilen her karakteri kontrol eder ve maskenin geçerli konumunda izin verilip verilmediğini belirler. Bir karakter maskeyle eşleşmezse reddedilir veya yok sayılır.

Apple UX araştırmasına (2024) göre, giriş maskeleri kullanıcının verileri alışılmadık bir biçimde girdiği alanlar için en etkilidir. Örneğin, SNILS (000-000-000 00) veya INN (000000000000) — kullanıcı tam rakam sayısını veya ayırıcıların konumunu bilmeyebilir ve maske görsel olarak doğru biçimi önerir.

Giriş Maskesi Sözdizimi

Maske sözdizimi InputMask kütüphanesinde, yer tutucu karakterler ve sabit karakterlerin bir kombinasyonunu kullanır. Yer tutucular, her konumda izin verilen karakter türünü tanımlar: rakamlar için 0 veya 9, harfler için A, herhangi bir karakter için _. Sabit karakterler, otomatik olarak eklenen ayırıcılardır: boşluklar, kısa çizgiler, parantezler, noktalar, eğik çizgiler.

Zorunlu ve İsteğe Bağlı Bloklar

Köşeli parantezler [0] zorunlu bir karakteri belirtir — kullanıcı bu konuma bir rakam girmelidir. Süslü parantezler {0} isteğe bağlı bir karakteri belirtir — kullanıcı bloğu atlarsa, maske ilgili ayırıcıları eklemez. Örneğin, bir tarih için maske [00]{.}[00]{.}[0000]: kullanıcı ayı girmezse, günden sonraki ayırıcı da görüntülenmez.

Maske Eki

Köşeli ve süslü parantezlerin dışındaki sabit karakterler ektir — alan boş olsa bile her zaman görüntülenirler. Örneğin, +7 ([000]) [000]-[00]-[00] maskesinde, +7, (, ), boşluk ve kısa çizgi karakterleri ektir ve kullanıcı tarafından silinemez. Ek, kullanıcının girişe başlamadan önce beklenen biçimi anlamasına yardımcı olur.

Amaca Göre Maske Türleri

Giriş maskeleri, tasarlandıkları veri türüne göre sınıflandırılır. Her türün kendi yapısı, grup sayısı ve ayırıcıların yerleşimi vardır. Doğru maske seçimi kullanıcı deneyimi için kritiktir — maske kullanıcının beklentileriyle eşleşmezse, kullanıcı otomatik eklenen karakterleri silecektir.

Telefon Numaraları için Maskeler

Telefon maskeleri en yaygın türdür. Bir Rus numarası +7 ([000]) [000]-[00]-[00] olarak, bir Amerikan numarası +1 ([000]) [000]-[0000] olarak biçimlendirilir. Maske, ülke ve şehir kodunda farklı sayıda rakamı desteklemelidir. InputMask kütüphanesi öncelikli maskeleri destekler: ilk maske uygun değilse (kullanıcı farklı bir ülke kodu girdiyse), ikinci maske uygulanır.

Banka Kartları için Maskeler

Kart numaraları için, 4 rakamlı gruplar arasında boşluklarla [0000] [0000] [0000] [0000] maskesi kullanılır. Ek olarak, son kullanma tarihi [00]/[00] ve CVV kodu [000] için bir maske uygulanabilir. Kart numarası maskesi, ödeme sistemine bağlı olarak 16–19 rakamı destekler: Visa ve Mastercard — 16 rakam, American Express — 15, Maestro — 12–19.

Tarih ve Kodlar için Maskeler

Tarih maskeleri, ayırıcı olarak nokta veya eğik çizgi ile [00]{.}[00]{.}[0000] biçimini kullanır. INN, SNILS ve diğer tanımlayıcılar için özelleştirilmiş maskeler kullanılır: INN — [000000000000] (12 rakam), SNILS — [000]-[000]-[000] [00] (kısa çizgilerle 11 rakam). Doğrulama kodları için — uzunluğa bağlı olarak [0000] veya [000000].

Swift'te Maske Uygulama

Swift'te maske uygulama, InputMask kütüphanesini kullanarak bir UITextFieldDelegate ayarlayarak yapılır. Kütüphane, bir metin alanına bağlanan ve belirtilen maskeye göre girişi otomatik olarak biçimlendiren MaskedTextFieldDelegate sınıfını sağlar.

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

Otomatik ülke algılamalı telefon numaraları için öncelikli maskeler kullanın. MaskedTextFieldDelegate bir maske dizisini destekler: eşleşen ilk maske uygulanır. Kullanıcı +1 kodunu girerse Amerikan biçimi, +7 girerse Rus biçimi uygulanır.

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

İsteğe bağlı bloklu tarihler için süslü parantezler kullanın. Kullanıcı yalnızca günü girerse, maske “21” görüntüler. Gün ve ayı girerse “21.07” görüntüler. Üç bileşeni de girerse “21.07.2026” görüntüler. İsteğe bağlı bloklar maskeyi uyarlanabilir yapar ve kullanıcıyı sağlamak istemediği verileri girmeye zorlamaz.

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

Yapıştırma ve Silme İşleme

Doğru yapıştırma işleme, bir giriş maskesi uygulamanın en zor yönlerinden biridir. Metin yapıştırırken (örneğin, panodan bir kart numarası), kütüphane yapıştırılan metindeki tüm ayırıcıları kaldırmalı, yalnızca önemli karakterleri çıkarmalı ve temiz verilere maskeyi uygulamalıdır. RedMadRobot'un InputMask'ı, shouldChangeCharactersIn yöntemi aracılığıyla bunu otomatik olarak yapar.

Biçimlendirilmiş metin (boşluklar veya kısa çizgilerle) yapıştırırken, kütüphane önce verileri normalleştirir: maske deseniyle eşleşmeyen tüm karakterleri kaldırır, ardından normalleştirilmiş dizeye maskeyi uygular. Yapıştırılan metin geçersiz karakterler içeriyorsa (rakam maskesinde harfler), bunlar yok sayılır.

Bir maskedeki silme (geri alma) işlemi özel dikkat gerektirir. Geri alma tuşuna basıldığında, maske sabit ayırıcıyı değil, son önemli karakteri silmelidir. İmleç sabit bir karakterden sonraysa, geri alma onu atlamalı ve önceki önemli karakteri silmelidir. InputMask bu davranışı girilen karakterlerden oluşan bir yığın aracılığıyla uygular.

Metin seçimi ve değiştirme için maske, kullanıcının metnin bir kısmını seçip yeni içerikle değiştirdiği durumları doğru şekilde işlemelidir. InputMask kütüphanesi, bir değiştirme aralığı ve yeni bir dize kabul eden MaskedTextFieldDelegate'teki modifyString yöntemi aracılığıyla bunu destekler.

Maske Tasarımı için En İyi Uygulamalar

Maske tasarımı, kullanıcının verileri nasıl gireceğini analiz etmekle başlar. Çoğu kullanıcı biçimi ezbere biliyorsa (telefon numarası), maske minimum düzeyde olmalıdır — yalnızca gruplar arasında ayırıcılar. Biçim alışılmadıksa (SNILS, INN), maske bir ek ve etiketlerle daha bilgilendirici olmalıdır.

Çok sayıda sabit karakter içeren aşırı maskelerden kaçının. +7 ([000]) [000]-[00]-[00] maskesi, 10 önemli karakter için 7 sabit karakter içerir — bu kabul edilebilir. Ancak kullanıcının sürekli olarak etrafından dolaştığı aşırı ayırıcılara sahip bir maske, yarardan çok zarar getirir. Biçimden emin değilseniz — serbest giriş kullanın.

Uluslararası uygulamalar için veri biçimlerinin ülkeler arasında farklılık gösterebileceğini unutmayın. ABD'de bir telefon numarası +1 (XXX) XXX-XXXX biçimindeyken, İtalya'da — +39 XXX XXX XXXX'dir. Kodla otomatik ülke algılamalı öncelikli maskeler kullanın veya kullanıcının numarayı girmeden önce bir ülke seçmesine izin verin.

InputMask UX testlerine göre, kullanıcılar giriş başlamadan önce biçimi gösteren (yer tutucu veya ek aracılığıyla) ve karakter girişini engellemeyen maskeleri tercih eder. Bir maske bir ipucu olmalıdır, bir kısıtlama değil. Kullanıcı maskeyle eşleşmeyen bir karakter girerse, açıklama yapmadan girişi engellemektense izin vermek daha iyidir.