Input Mask: apa itu, masker input dan pemformatan

Apa itu Input Mask?

Input Mask (masker input) adalah mekanisme yang menentukan pola data yang dimasukkan dan secara otomatis memformat teks saat diketik. Pengguna hanya memasukkan karakter signifikan (angka, huruf), dan sistem secara otomatis menambahkan pemisah: spasi, tanda hubung, kurung, garis miring. Ini adalah perbedaan utama dari pemrosesan pasca, di mana data diformat setelah input selesai.

Masker input memecahkan tiga masalah pengalaman pengguna. Pertama — beban kognitif: pengguna tidak perlu mengingat format data dan menempatkan pemisah secara manual. Kedua — kecepatan input: penambahan pemisah secara otomatis dan perpindahan ke grup karakter berikutnya mempercepat pengetikan. Ketiga — kualitas data: masker memastikan data dikumpulkan dalam format seragam tanpa variasi.

Tidak seperti pemformat NSFormatter yang bekerja pada tingkat tampilan data yang sudah dimasukkan, Input Mask bekerja pada tingkat input: ia mengontrol setiap karakter yang dimasukkan dan menentukan apakah karakter tersebut diizinkan di posisi masker saat ini. Jika karakter tidak sesuai dengan masker, karakter tersebut ditolak atau diabaikan.

Menurut penelitian UX Apple (2024), masker input paling efektif untuk bidang di mana pengguna memasukkan data dalam format yang tidak dikenal. Misalnya, SNILS (000-000-000 00) atau INN (000000000000) — pengguna mungkin tidak mengetahui jumlah angka yang tepat atau lokasi pemisah, dan masker secara visual menunjukkan format yang benar.

Sintaks masker input

Sintaks masker di pustaka InputMask menggunakan kombinasi karakter pengganti dan karakter konstanta. Pengganti menentukan jenis karakter yang diizinkan di setiap posisi: 0 atau 9 untuk angka, A untuk huruf, _ untuk karakter apa pun. Karakter konstanta adalah pemisah yang ditambahkan secara otomatis: spasi, tanda hubung, kurung, titik, garis miring.

Blok wajib dan opsional

Tanda kurung siku [0] menunjukkan karakter wajib — pengguna harus memasukkan angka di posisi ini. Kurung kurawal {0} menunjukkan karakter opsional — jika pengguna melewatkan blok, masker tidak menyisipkan pemisah yang sesuai. Misalnya, masker [00]{.}[00]{.}[0000] untuk tanggal: jika pengguna tidak memasukkan bulan, pemisah setelah hari juga tidak ditampilkan.

Afiks masker

Karakter konstanta di luar tanda kurung siku dan kurung kurawal merupakan afiks — karakter tersebut selalu ditampilkan, bahkan jika bidang kosong. Misalnya, dalam masker +7 ([000]) [000]-[00]-[00] karakter +7, (, ), spasi dan tanda hubung adalah afiks dan tidak dapat dihapus oleh pengguna. Afiks membantu pengguna memahami format yang diharapkan sebelum memulai input.

Jenis masker berdasarkan tujuan

Masker input diklasifikasikan berdasarkan jenis data yang dimaksudkan. Setiap jenis memiliki struktur, jumlah grup, dan penempatan pemisahnya sendiri. Pemilihan masker yang tepat sangat penting untuk pengalaman pengguna — jika masker tidak sesuai dengan harapan pengguna, ia akan menghapus karakter yang disisipkan secara otomatis.

Masker untuk nomor telepon

Masker telepon — jenis yang paling umum. Nomor Rusia diformat sebagai +7 ([000]) [000]-[00]-[00], nomor Amerika sebagai +1 ([000]) [000]-[0000]. Masker harus mendukung jumlah angka yang berbeda dalam kode negara dan kota. Pustaka InputMask mendukung masker prioritas: jika masker pertama tidak cocok (pengguna memasukkan kode negara lain), masker kedua diterapkan.

Masker untuk kartu bank

Untuk nomor kartu digunakan masker [0000] [0000] [0000] [0000] dengan spasi di antara grup 4 angka. Selain itu, masker untuk tanggal kedaluwarsa [00]/[00] dan kode CVV [000] dapat diterapkan. Masker untuk nomor kartu mendukung 16–19 angka tergantung pada sistem pembayaran: Visa dan Mastercard — 16 angka, American Express — 15, Maestro — 12–19.

Masker untuk tanggal dan kode

Masker tanggal menggunakan format [00]{.}[00]{.}[0000] dengan pemisah berupa titik atau garis miring. Untuk INN, SNILS, dan pengidentifikasi lainnya, masker khusus diterapkan: INN — [000000000000] (12 angka), SNILS — [000]-[000]-[000] [00] (11 angka dengan tanda hubung). Untuk kode verifikasi — [0000] atau [000000] tergantung pada panjangnya.

Implementasi masker di Swift

Implementasi masker di Swift dilakukan dengan mengatur delegasi UITextFieldDelegate menggunakan pustaka InputMask. Pustaka menyediakan kelas MaskedTextFieldDelegate yang terhubung ke bidang teks dan secara otomatis memformat input sesuai dengan masker yang ditentukan.

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

Untuk nomor telepon dengan deteksi negara otomatis, gunakan masker prioritas. MaskedTextFieldDelegate mendukung array masker: masker pertama yang cocok diterapkan. Jika pengguna memasukkan kode +1, format Amerika diterapkan, jika +7 — format Rusia.

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

Untuk tanggal dengan blok opsional gunakan kurung kurawal. Jika pengguna hanya memasukkan hari, masker ditampilkan sebagai „21". Jika memasukkan hari dan bulan — „21.07". Jika ketiga komponen — „21.07.2026". Blok opsional membuat masker adaptif dan tidak memaksa pengguna untuk memasukkan data yang tidak ingin diberikan.

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

Penanganan tempel dan hapus

Penanganan tempel yang benar — salah satu aspek paling rumit dalam implementasi masker input. Saat menempel teks (misalnya, nomor kartu dari clipboard), pustaka harus menghapus semua pemisah dari teks yang ditempel, hanya mengekstrak karakter signifikan, dan menerapkan masker ke data bersih. InputMask dari RedMadRobot melakukan ini secara otomatis melalui metode shouldChangeCharactersIn.

Saat menempel teks yang diformat (dengan spasi atau tanda hubung), pustaka terlebih dahulu menormalkan data: menghapus semua karakter yang tidak sesuai dengan pola masker, kemudian menerapkan masker ke string yang dinormalisasi. Jika teks yang ditempel berisi karakter yang tidak diizinkan (huruf dalam masker numerik), karakter tersebut diabaikan.

Penanganan hapus (backspace) dalam masker memerlukan perhatian khusus. Saat menekan backspace, masker harus menghapus karakter signifikan terakhir, bukan pemisah konstanta. Jika kursor berada setelah karakter konstanta, backspace harus melewatkannya dan menghapus karakter signifikan sebelumnya. InputMask mengimplementasikan perilaku ini melalui tumpukan karakter yang dimasukkan.

Untuk memilih dan mengganti teks, masker harus menangani situasi dengan benar ketika pengguna memilih sebagian teks dan menggantinya dengan yang baru. Pustaka InputMask mendukung ini melalui metode modifyString di MaskedTextFieldDelegate yang menerima rentang penggantian dan string baru.

Rekomendasi untuk merancang masker

Merancang masker dimulai dengan analisis bagaimana pengguna akan memasukkan data. Jika sebagian besar pengguna hafal formatnya (nomor telepon), masker harus minimal — hanya pemisah di antara grup. Jika formatnya tidak dikenal (SNILS, INN), masker harus lebih informatif, dengan afiks dan label.

Hindari masker berlebihan dengan banyak karakter konstanta. Masker +7 ([000]) [000]-[00]-[00] berisi 7 karakter konstanta dari 10 karakter signifikan — ini dapat diterima. Tetapi masker dengan pemisah berlebihan yang terus-menerus dilewati pengguna lebih banyak merugikan daripada menguntungkan. Jika ragu tentang format — gunakan input bebas.

Untuk aplikasi internasional pertimbangkan bahwa format data dapat berbeda di berbagai negara. Nomor telepon di AS memiliki format +1 (XXX) XXX-XXXX, dan di Italia — +39 XXX XXX XXXX. Gunakan masker prioritas dengan deteksi negara otomatis berdasarkan kode atau berikan pengguna pilihan negara sebelum memasukkan nomor.

Menurut pengujian UX InputMask, pengguna lebih menyukai masker yang menunjukkan format sebelum memulai input (melalui placeholder atau afiks) dan tidak memblokir input karakter. Masker harus menjadi petunjuk, bukan batasan. Jika pengguna memasukkan karakter yang tidak sesuai dengan masker, lebih baik mengizinkannya daripada memblokir input tanpa menjelaskan alasannya.