UITextField — apa itu, konfigurasi bidang input dan prinsip kerja

Apa itu UITextField

UITextField — adalah kelas dari framework UIKit yang dirancang untuk input teks satu baris oleh pengguna. Kelas ini mewarisi UIControl, yang memungkinkan berlangganan ke event input melalui mekanisme target-action: addTarget(self, action: Selector("textChanged:"), for: editingChanged). UITextField menampilkan bingkai (borderStyle), teks placeholder saat bidang kosong, tombol hapus (clearButtonMode), dan dapat berisi tampilan bantu kiri/kanan. Bidang secara otomatis menampilkan/menyembunyikan keyboard saat menerima/kehilangan fokus melalui becomeFirstResponder dan resignFirstResponder. Ukuran bidang ditentukan oleh intrinsicContentSize berdasarkan font dan border style. Untuk membuat UITextField di Interface Builder (Storyboard/XIB) gunakan Object Library, secara terprogram — melalui inisialisator UITextField(frame: CGRect). Kelas ini sepenuhnya kompatibel dengan arsitektur iOS modern: Combine publishers, @Published di SwiftUI melalui UIViewRepresentable, dan Diffable Data Source untuk formulir.

Jenis Keyboard UIKeyboardType

UITextField mendukung 12 jenis keyboard melalui properti keyboardType. Setiap jenis mengoptimalkan rangkaian karakter untuk skenario input tertentu. UIKeyboardType.default — keyboard QWERTY standar. UIKeyboardType.numberPad — hanya angka tanpa karakter tambahan (ideal untuk PIN dan nomor telepon). UIKeyboardType.emailAddress — keyboard dengan karakter @ dan titik di lapisan utama. UIKeyboardType.URL — keyboard dengan .com, /, dan . di lapisan utama. UIKeyboardType.phonePad — keyboard numerik dengan +, *, # untuk memasukkan nomor telepon. UIKeyboardType.decimalPad — angka dengan titik desimal untuk memasukkan harga. UIKeyboardType.webSearch — keyboard dengan tombol Go dan optimalisasi untuk kueri pencarian. UIKeyboardType.asciiCapable — hanya karakter ASCII untuk alfabet Latin. Keyboard ditampilkan saat memanggil becomeFirstResponder dan disembunyikan saat resignFirstResponder. Jenis keyboard dapat diubah secara dinamis selama pengeditan.

Delegate UITextFieldDelegate dan Metodenya

UITextFieldDelegate — adalah protokol yang menentukan perilaku bidang teks pada berbagai tahap input. Metode utama: textFieldShouldBeginEditing(textField) — mengembalikan Bool, mengizinkan atau melarang memulai pengeditan; textFieldDidBeginEditing — dipanggil setelah keyboard muncul; textFieldShouldEndEditing — memeriksa apakah pengeditan dapat diakhiri (jika false bidang tidak kehilangan fokus); textFieldDidEndEditing — dipanggil setelah keyboard disembunyikan; textFieldShouldChangeCharactersInRange — dipanggil pada setiap input karakter, memungkinkan pemfilteran input (hanya satu karakter diizinkan, jika mengembalikan false — karakter tidak akan ditambahkan); textFieldShouldReturn — dipanggil saat menekan Return/Go/Next/Search, digunakan untuk berpindah ke bidang berikutnya. Delegate tidak bersifat Optional: semua metode memiliki implementasi default, tetapi untuk perilaku kustom perlu meng-override metode yang sesuai.

Manajemen fokus melalui shouldReturn

Metode shouldReturn — pola standar untuk navigasi antar bidang formulir. Implementasi: textFieldShouldReturn(textField) — kita periksa textField mana yang memicu event dan pindahkan fokus ke bidang berikutnya melalui becomeFirstResponder(). Jika ini adalah bidang terakhir — panggil resignFirstResponder() untuk menyembunyikan keyboard. Untuk menyimpan referensi ke bidang, gunakan IBOutlet collection atau IBOutlet terpisah untuk setiap bidang.

Secure Text Entry dan left/right view kustom

isSecureTextEntry — properti UITextField yang saat true mengganti karakter yang dimasukkan dengan titik (•) dan memblokir penyalinan teks melalui UIMenuController. Digunakan untuk bidang kata sandi, PIN, CVV. Saat beralih antara mode aman dan teks biasa (show/hide password) atur textField.isSecureTextEntry.toggle(). Penting: saat mengubah isSecureTextEntry teks bidang direset — simpan terlebih dahulu. LeftView dan RightView — adalah UIView kustom yang ditampilkan di dalam bidang input di kiri atau kanan. Penggunaan tipikal: ikon pencarian di leftView, tombol "Hapus" di rightView. Konfigurasi: textField.leftViewMode = always (selalu) atau whileEditing (hanya saat mengedit). Left/right view diposisikan secara otomatis di dalam bidang teks dengan mempertimbangkan padding. Ukuran view ditentukan oleh bounds atau Auto Layout.

import UIKit

class LoginViewController: UIViewController {
    let passwordField = UITextField()

    override func viewDidLoad() {
        super.viewDidLoad()
        passwordField.isSecureTextEntry = true
        passwordField.placeholder = "Password"
        passwordField.keyboardType = .asciiCapable
        passwordField.delegate = self

        // Tombol kustom untuk menampilkan/menyembunyikan kata sandi
        let showButton = UIButton(type: .system)
        showButton.setTitle("Tampilkan", for: .normal)
        showButton.addTarget(self, action: #selector(togglePasswordVisibility),
                       for: .touchUpInside)
        passwordField.rightView = showButton
        passwordField.rightViewMode = .always
    }

    @objc func togglePasswordVisibility() {
        passwordField.isSecureTextEntry.toggle()
    }
}

Konfigurasi UITextInputTraits

UITextInputTraits — adalah protokol yang menentukan penyesuaian visual dan perilaku keyboard untuk UITextField. Properti utama: autocorrectionType (.default, .no, .yes) — mengaktifkan atau menonaktifkan koreksi otomatis teks; autocapitalizationType (.none, .words, .sentences, .allCharacters) — Caps Lock otomatis untuk karakter pertama; spellCheckingType — pemeriksaan ejaan; returnKeyType (.done, .go, .next, .search, .send, .continue, .join, .route, .emergencyCall) — teks tombol Return di keyboard; enablesReturnKeyAutomatically — pemblokiran otomatis tombol Return saat bidang kosong. Untuk bidang input nama gunakan autocapitalizationType = .words, untuk email — autocorrectionType = .no, untuk URL — keyboardType = .URL + autocapitalizationType = .none. Konfigurasi traits dilakukan setelah inisialisasi bidang sebelum ditampilkan. Perubahan traits memperbarui keyboard secara dinamis pada kemunculan berikutnya.

Return Key Type dan navigasi formulir

Return Key Type menentukan teks tombol di keyboard: Next — pindah ke bidang berikutnya, Done — selesaikan input, Search — mulai pencarian, Send — kirim formulir, Continue — lanjutkan pengisian. Dalam kombinasi dengan metode delegate shouldReturn, returnKeyType memungkinkan pembuatan UX alami: pengguna mengisi bidang, menekan Next untuk pindah ke berikutnya, dan Done untuk mengirim di bidang terakhir. Untuk kustomisasi teks tombol gunakan UIButtonConfiguration di iOS 15+.

Placeholder, Pemformatan, dan Masker Input

Placeholder UITextField — adalah teks yang ditampilkan dalam warna abu-abu saat bidang kosong. Konfigurasi: textField.placeholder = "Enter email". Untuk kustomisasi warna dan font placeholder gunakan attributedPlaceholder dengan NSAttributedString. Masker input diimplementasikan melalui metode delegate shouldChangeCharactersInRange — format nomor telepon, tanggal, kartu kredit, SNILS didukung. Masker input memungkinkan pemisahan tampilan dan nilai: pengguna melihat teks yang diformat (misalnya, +7 (999) 999-99-99), sementara di model disimpan "79999999999". Contoh implementasi: simpan masker sebagai string dengan simbol X untuk pengganti; pada setiap input buat string yang diformat dan kembalikan false di shouldChangeCharactersInRange, ganti teks bidang melalui textField.text = formattedText. Untuk angka gunakan NumberFormatter dan decimal keyboardType.

extension LoginViewController: UITextFieldDelegate {
    func textFieldShouldReturn(
        textField: UITextField
    ) -> Bool {
        if textField == emailField {
            passwordField.becomeFirstResponder()
        } else if textField == passwordField {
            textField.resignFirstResponder()
            loginTapped()
        }
        return true
    }

    func textField(
        textField: UITextField,
        shouldChangeCharactersIn range: NSRange,
        replacementString string: String
    ) -> Bool {
        // Blokir spasi di email
        if textField == emailField && string == " " {
            return false
        }
        // Batas panjang kata sandi
        if textField == passwordField {
            let newLength = (textField.text?.count ?? 0) +
                string.count - range.length
            return newLength <= 32
        }
        return true
    }
}

Contoh Kode: Validasi dan Formulir

Mari kita lihat contoh lengkap implementasi formulir login dengan UITextField, validasi email, dan umpan balik visual. Formulir berisi dua bidang: emailField (keyboard emailAddress, tanpa koreksi otomatis) dan passwordField (secureTextEntry). Validasi dilakukan di shouldChangeCharactersInRange dan tambahan saat menekan tombol Login. Untuk umpan balik visual: bingkai merah (layer.borderColor) saat error, hijau — saat validasi berhasil. Reset bingkai saat memulai pengeditan di textFieldDidBeginEditing.

Validasi email dengan ekspresi reguler

Validasi email dilakukan melalui NSPredicate dengan format "SELF MATCHES %@" dan ekspresi reguler untuk pemeriksaan dasar format. Pemeriksaan keberadaan email yang sebenarnya harus dilakukan di server. Untuk validasi lanjutan gunakan pustaka SwiftValidators atau Combine publishers. Contoh: NSPredicate(format: "SELF MATCHES [c] %@", emailRegex).evaluate(with: email). Bingkai bidang diperbarui melalui animation block untuk transisi yang halus.

func validateEmail(textField: UITextField) {
    guard let text = textField.text, !text.isEmpty else {
        textField.layer.borderColor = UIColor.clear.cgColor
        return
    }

    let emailRegex = "[A-Z0-9a-z._%+-]+@[A-Za-z0-9.-]+\\.\\p{L}{2,}"
    let predicate = NSPredicate(format: "SELF MATCHES [c] %@", emailRegex)
    let isValid = predicate.evaluate(with: text)

    UIView.animate(withDuration: 0.2) {
        textField.layer.borderColor = isValid
            ? UIColor.systemGreen.cgColor
            : UIColor.systemRed.cgColor
        textField.layer.borderWidth = 1.0
        textField.layer.cornerRadius = 6.0
    }
}