UITextField — यह क्या है, इनपुट फ़ील्ड सेटअप और कार्य सिद्धांत

UITextField क्या है

UITextField UIKit फ्रेमवर्क का एक वर्ग है जो उपयोगकर्ता द्वारा एकल-पंक्ति टेक्स्ट इनपुट के लिए डिज़ाइन किया गया है। यह वर्ग UIControl से इनहेरिट करता है, जो टार्गेट-एक्शन तंत्र के माध्यम से इनपुट इवेंट्स की सदस्यता लेने की अनुमति देता है: addTarget(self, action: Selector("textChanged:"), for: editingChanged). UITextField एक बॉर्डर (borderStyle), फ़ील्ड खाली होने पर प्लेसहोल्डर टेक्स्ट, एक क्लियर बटन (clearButtonMode) प्रदर्शित करता है और इसमें बाएँ/दाएँ सहायक व्यू हो सकते हैं। फ़ील्ड becomeFirstResponder और resignFirstResponder के माध्यम से फ़ोकस प्राप्त/खोने पर स्वचालित रूप से कीबोर्ड दिखाता/छिपाता है। फ़ील्ड का आकार फ़ॉन्ट और बॉर्डर शैली के आधार पर intrinsicContentSize द्वारा निर्धारित किया जाता है। Interface Builder (Storyboard/XIB) में UITextField बनाने के लिए, Object Library का उपयोग करें; प्रोग्रामेटिक रूप से, इनिशियलाइज़र UITextField(frame: CGRect) का उपयोग करें। यह वर्ग आधुनिक iOS आर्किटेक्चर के साथ पूरी तरह से संगत है: Combine publishers, UIViewRepresentable के माध्यम से SwiftUI में @Published और फ़ॉर्म के लिए Diffable Data Source।

UIKeyboardType कीबोर्ड प्रकार

UITextField keyboardType प्रॉपर्टी के माध्यम से 12 कीबोर्ड प्रकारों का समर्थन करता है। प्रत्येक प्रकार एक विशिष्ट इनपुट परिदृश्य के लिए वर्ण सेट को अनुकूलित करता है। UIKeyboardType.default — मानक QWERTY कीबोर्ड। UIKeyboardType.numberPad — अतिरिक्त प्रतीकों के बिना केवल अंक (PIN कोड और फ़ोन नंबर के लिए आदर्श)। UIKeyboardType.emailAddress — मुख्य परत पर @ और डॉट के साथ कीबोर्ड। UIKeyboardType.URL — मुख्य परत पर .com, / और डॉट के साथ कीबोर्ड। UIKeyboardType.phonePad — फ़ोन नंबर दर्ज करने के लिए +, *, # के साथ संख्यात्मक कीपैड। UIKeyboardType.decimalPad — मूल्य दर्ज करने के लिए दशमलव बिंदु के साथ अंक। UIKeyboardType.webSearch — खोज क्वेरी के लिए अनुकूलित Go बटन के साथ कीबोर्ड। UIKeyboardType.asciiCapable — लैटिन टेक्स्ट के लिए केवल ASCII वर्ण। becomeFirstResponder कॉल करने पर कीबोर्ड प्रकट होता है और resignFirstResponder कॉल करने पर छिप जाता है। कीबोर्ड प्रकार को संपादन के दौरान गतिशील रूप से बदला जा सकता है।

UITextFieldDelegate और इसकी विधियाँ

UITextFieldDelegate एक प्रोटोकॉल है जो इनपुट के विभिन्न चरणों में टेक्स्ट फ़ील्ड के व्यवहार को परिभाषित करता है। मुख्य विधियाँ: textFieldShouldBeginEditing(textField) — एक Bool लौटाता है जो संपादन शुरू करने की अनुमति या अस्वीकृति देता है; textFieldDidBeginEditing — कीबोर्ड प्रकट होने के बाद कॉल किया जाता है; textFieldShouldEndEditing — जाँचता है कि क्या संपादन पूरा किया जा सकता है (यदि false है, तो फ़ील्ड फ़ोकस नहीं खोता); textFieldDidEndEditing — कीबोर्ड छिपने के बाद कॉल किया जाता है; textFieldShouldChangeCharactersInRange — प्रत्येक वर्ण इनपुट पर कॉल किया जाता है, इनपुट को फ़िल्टर करने की अनुमति देता है (केवल एक वर्ण की अनुमति है, यदि false लौटाया जाता है — वर्ण नहीं जोड़ा जाएगा); textFieldShouldReturn — Return/Go/Next/Search दबाने पर कॉल किया जाता है, अगले फ़ील्ड पर जाने के लिए उपयोग किया जाता है। डेलिगेट Optional नहीं है: सभी विधियों का डिफ़ॉल्ट कार्यान्वयन है, लेकिन कस्टम व्यवहार के लिए आपको संबंधित विधि को ओवरराइड करना होगा।

shouldReturn के माध्यम से फ़ोकस प्रबंधन

shouldReturn विधि फ़ॉर्म फ़ील्ड के बीच नेविगेट करने का मानक पैटर्न है। कार्यान्वयन: textFieldShouldReturn(textField) — जाँचें कि किस textField ने इवेंट को ट्रिगर किया और becomeFirstResponder() के माध्यम से फ़ोकस को अगले फ़ील्ड पर ले जाएँ। यदि यह अंतिम फ़ील्ड है, तो कीबोर्ड छिपाने के लिए resignFirstResponder() कॉल करें। फ़ील्ड संदर्भ संग्रहीत करने के लिए प्रत्येक फ़ील्ड के लिए IBOutlet collection या अलग IBOutlet का उपयोग करें।

Secure Text Entry और कस्टम left/right व्यू

isSecureTextEntry — UITextField की एक प्रॉपर्टी है, जो true होने पर दर्ज किए गए वर्णों को बुलेट (•) से बदल देती है और UIMenuController के माध्यम से टेक्स्ट कॉपी करना अवरुद्ध करती है। पासवर्ड फ़ील्ड, PIN कोड, CVV के लिए उपयोग किया जाता है। सुरक्षित मोड और सादे टेक्स्ट (show/hide password) के बीच स्विच करते समय, textField.isSecureTextEntry.toggle() सेट करें। महत्वपूर्ण: isSecureTextEntry बदलने पर फ़ील्ड का टेक्स्ट रीसेट हो जाता है — इसे पहले से सहेज लें। LeftView और RightView कस्टम UIView हैं जो इनपुट फ़ील्ड के अंदर बाएँ या दाएँ प्रदर्शित होते हैं। सामान्य उपयोग: leftView में खोज आइकन, rightView में "क्लियर" बटन। कॉन्फ़िगरेशन: textField.leftViewMode = always (हमेशा) या whileEditing (केवल संपादन के दौरान)। left/right व्यू पैडिंग को ध्यान में रखते हुए स्वचालित रूप से टेक्स्ट फ़ील्ड के अंदर स्थित होते हैं। व्यू का आकार bounds या 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

        // कस्टम पासवर्ड दिखाएं/छिपाएं बटन
        let showButton = UIButton(type: .system)
        showButton.setTitle("दिखाएं", for: .normal)
        showButton.addTarget(self, action: #selector(togglePasswordVisibility),
                       for: .touchUpInside)
        passwordField.rightView = showButton
        passwordField.rightViewMode = .always
    }

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

UITextInputTraits कॉन्फ़िगरेशन

UITextInputTraits एक प्रोटोकॉल है जो UITextField के लिए कीबोर्ड के दृश्य और व्यवहारिक स्वरूप को परिभाषित करता है। मुख्य प्रॉपर्टीज़: autocorrectionType (.default, .no, .yes) — टेक्स्ट ऑटोकरेक्शन को सक्षम या अक्षम करता है; autocapitalizationType (.none, .words, .sentences, .allCharacters) — पहले वर्ण के लिए स्वचालित कैप्स लॉक; spellCheckingType — वर्तनी जाँच; returnKeyType (.done, .go, .next, .search, .send, .continue, .join, .route, .emergencyCall) — कीबोर्ड पर Return बटन का टेक्स्ट; enablesReturnKeyAutomatically — फ़ील्ड खाली होने पर Return बटन का स्वचालित अक्षमीकरण। नाम इनपुट फ़ील्ड के लिए, autocapitalizationType = .words का उपयोग करें; ईमेल के लिए, autocorrectionType = .no का उपयोग करें; URL के लिए, keyboardType = .URL + autocapitalizationType = .none का उपयोग करें। Traits को फ़ील्ड प्रदर्शित होने से पहले उसके आरंभीकरण के बाद कॉन्फ़िगर किया जाता है। Traits को गतिशील रूप से बदलने से अगली उपस्थिति पर कीबोर्ड अपडेट हो जाता है।

Return Key Type और फ़ॉर्म नेविगेशन

Return Key Type कीबोर्ड पर बटन के टेक्स्ट को परिभाषित करता है: Next — अगले फ़ील्ड पर जाएँ, Done — इनपुट पूरा करें, Search — खोज शुरू करें, Send — फ़ॉर्म सबमिट करें, Continue — भरना जारी रखें। shouldReturn डेलिगेट विधि के साथ संयुक्त होने पर, returnKeyType एक प्राकृतिक UX सक्षम करता है: उपयोगकर्ता फ़ील्ड भरता है, अगले पर जाने के लिए Next दबाता है, और अंतिम फ़ील्ड पर सबमिट करने के लिए Done दबाता है। बटन टेक्स्ट कस्टमाइज़ेशन के लिए, iOS 15+ में UIButtonConfiguration का उपयोग करें।

प्लेसहोल्डर, फ़ॉर्मेटिंग और इनपुट मास्क

UITextField प्लेसहोल्डर वह टेक्स्ट है जो फ़ील्ड खाली होने पर ग्रे रंग में प्रदर्शित होता है। कॉन्फ़िगरेशन: textField.placeholder = "Enter email"। प्लेसहोल्डर के रंग और फ़ॉन्ट को कस्टमाइज़ करने के लिए, NSAttributedString के साथ attributedPlaceholder का उपयोग करें। इनपुट मास्क डेलिगेट विधि shouldChangeCharactersInRange के माध्यम से कार्यान्वित किया जाता है — फ़ोन नंबर, दिनांक, क्रेडिट कार्ड और SNILS फ़ॉर्मेट का समर्थन करता है। इनपुट मास्क प्रदर्शन को मान से अलग करने की अनुमति देता है: उपयोगकर्ता फ़ॉर्मेटेड टेक्स्ट देखता है (जैसे, +7 (999) 999-99-99), जबकि मॉडल "79999999999" संग्रहीत करता है। कार्यान्वयन उदाहरण: मास्क को प्रतिस्थापन के लिए X वर्णों वाली स्ट्रिंग के रूप में संग्रहीत करें; प्रत्येक इनपुट पर, फ़ॉर्मेटेड स्ट्रिंग बनाएँ और shouldChangeCharactersInRange में false लौटाएँ, textField.text = formattedText के माध्यम से फ़ील्ड टेक्स्ट को बदलें। संख्याओं के लिए, NumberFormatter और 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 {
        // ईमेल में स्पेस ब्लॉक करें
        if textField == emailField && string == " " {
            return false
        }
        // पासवर्ड लंबाई सीमा
        if textField == passwordField {
            let newLength = (textField.text?.count ?? 0) +
                string.count - range.length
            return newLength <= 32
        }
        return true
    }
}

कोड उदाहरण: सत्यापन और फ़ॉर्म

आइए UITextField, ईमेल सत्यापन और दृश्य प्रतिक्रिया के साथ लॉगिन फ़ॉर्म को लागू करने का एक पूरा उदाहरण देखें। फ़ॉर्म में दो फ़ील्ड हैं: emailField (emailAddress कीबोर्ड, कोई ऑटोकरेक्शन नहीं) और passwordField (secureTextEntry)। सत्यापन shouldChangeCharactersInRange में और अतिरिक्त रूप से Login बटन दबाने पर किया जाता है। दृश्य प्रतिक्रिया के लिए: त्रुटि पर लाल बॉर्डर (layer.borderColor), सफल सत्यापन पर हरा। textFieldDidBeginEditing में संपादन शुरू होने पर बॉर्डर रीसेट।

रेगुलर एक्सप्रेशन के साथ ईमेल सत्यापन

ईमेल सत्यापन प्रारूप "SELF MATCHES %@" के साथ NSPredicate और बुनियादी प्रारूप जाँच के लिए रेगुलर एक्सप्रेशन के माध्यम से किया जाता है। वास्तविक ईमेल अस्तित्व जाँच सर्वर पर की जानी चाहिए। उन्नत सत्यापन के लिए, SwiftValidators लाइब्रेरी या Combine publishers का उपयोग करें। उदाहरण: NSPredicate(format: "SELF MATCHES [c] %@", emailRegex).evaluate(with: email)। सहज संक्रमण के लिए फ़ील्ड बॉर्डर एक एनिमेशन ब्लॉक के माध्यम से अपडेट होता है।

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
    }
}