Input Mask: ما هو، أقنعة الإدخال والتنسيق

ما هو قناع الإدخال؟

Input Mask (قناع الإدخال) هو آلية تحدد قالباً للبيانات المدخلة وتقوم بتنسيق النص تلقائياً أثناء كتابته. يدخل المستخدم فقط الأحرف المهمة (أرقام، حروف)، ويقوم النظام تلقائياً بإضافة الفواصل: مسافات، شرطات، أقواس، شرط مائلة. هذا هو الفرق الرئيسي عن المعالجة اللاحقة، حيث يتم تنسيق البيانات بعد اكتمال الإدخال.

تحل أقنعة الإدخال ثلاث مشاكل في تجربة المستخدم. الأولى — العبء المعرفي: لا يحتاج المستخدم إلى تذكر تنسيق البيانات ووضع الفواصل يدوياً. الثانية — سرعة الإدخال: الإدراج التلقائي للفواصل والانتقال إلى المجموعة التالية من الأحرف يسرع الكتابة. الثالثة — جودة البيانات: يضمن القناع جمع البيانات بتنسيق موحد دون اختلافات.

على عكس منسقات NSFormatter التي تعمل على مستوى عرض البيانات المدخلة بالفعل، يعمل قناع الإدخال على مستوى الإدخال: فهو يتحكم في كل حرف يتم إدخاله ويحدد ما إذا كان مسموحاً به في الموضع الحالي للقناع. إذا كان الحرف لا يتطابق مع القناع، يتم رفضه أو تجاهله.

وفقاً لبحوث تجربة المستخدم من Apple (2024)، تكون أقنعة الإدخال أكثر فاعلية للحقول التي يدخل فيها المستخدم بيانات بتنسيق غير مألوف. على سبيل المثال، SNILS (000-000-000 00) أو INN (000000000000) — قد لا يعرف المستخدم العدد الدقيق للأرقام أو موقع الفواصل، ويقترح القناع التنسيق الصحيح بصرياً.

بناء جملة قناع الإدخال

بناء جملة القناع في مكتبة InputMask يستخدم مزيجاً من أحرف العناصر النائبة والأحرف الثابتة. تحدد العناصر النائبة نوع الحرف المسموح به في كل موضع: 0 أو 9 للأرقام، A للحروف، _ لأي حرف. الأحرف الثابتة هي فواصل يتم إدراجها تلقائياً: مسافات، شرطات، أقواس، نقاط، شرط مائلة.

الكتل الإلزامية والاختيارية

الأقواس المربعة [0] تشير إلى حرف إلزامي — يجب على المستخدم إدخال رقم في هذا الموضع. الأقواس المتعرجة {0} تشير إلى حرف اختياري — إذا تخطى المستخدم الكتلة، لا يقوم القناع بإدراج الفواصل المقابلة. على سبيل المثال، القناع [00]{.}[00]{.}[0000] للتاريخ: إذا لم يدخل المستخدم الشهر، لا يتم عرض الفاصل بعد اليوم أيضاً.

لاحقة القناع

الأحرف الثابتة خارج الأقواس المربعة والمتعرجة هي اللاحقة — تظهر دائماً، حتى لو كان الحقل فارغاً. على سبيل المثال، في القناع +7 ([000]) [000]-[00]-[00]، الأحرف +7 و( و) والمسافة والشرطة هي اللاحقة ولا يمكن للمستخدم حذفها. تساعد اللاحقة المستخدم على فهم التنسيق المتوقع حتى قبل بدء الإدخال.

أنواع الأقنعة حسب الغرض

أقنعة الإدخال تُصنف حسب نوع البيانات التي صممت من أجلها. كل نوع له هيكله الخاص وعدد المجموعات وموقع الفواصل. الاختيار الصحيح للقناع أمر بالغ الأهمية لتجربة المستخدم — إذا كان القناع لا يتوافق مع توقعات المستخدم، فسيقوم بحذف الأحرف المدرجة تلقائياً.

أقنعة أرقام الهواتف

أقنعة الهواتف هي النوع الأكثر شيوعاً. يتم تنسيق الرقم الروسي كـ +7 ([000]) [000]-[00]-[00]، والرقم الأمريكي كـ +1 ([000]) [000]-[0000]. يجب أن يدعم القناع أعداداً مختلفة من الأرقام في رمز البلد والمدينة. تدعم مكتبة InputMask الأقنعة ذات الأولوية: إذا كان القناع الأول غير مناسب (أدخل المستخدم رمز بلد مختلف)، يتم تطبيق الثاني.

أقنعة البطاقات المصرفية

لـ أرقام البطاقات يُستخدم القناع [0000] [0000] [0000] [0000] مع مسافات بين مجموعات من 4 أرقام. بالإضافة إلى ذلك، يمكن تطبيق قناع لتاريخ انتهاء الصلاحية [00]/[00] ورمز CVV [000]. يدعم قناع رقم البطاقة 16–19 رقماً حسب نظام الدفع: Visa وMastercard — 16 رقماً، American Express — 15، Maestro — 12–19.

أقنعة التواريخ والرموز

أقنعة التواريخ تستخدم التنسيق [00]{.}[00]{.}[0000] بنقطة أو شرطة مائلة كفاصل. لـ INN وSNILS والمعرفات الأخرى تُستخدم أقنعة متخصصة: INN — [000000000000] (12 رقماً)، SNILS — [000]-[000]-[000] [00] (11 رقماً مع شرطات). لرموز التحقق — [0000] أو [000000] حسب الطول.

تنفيذ قناع في Swift

تنفيذ قناع في Swift يتم عن طريق تعيين مفوض UITextFieldDelegate باستخدام مكتبة InputMask. توفر المكتبة الفئة MaskedTextFieldDelegate التي تتصل بحقل النص وتقوم تلقائياً بتنسيق الإدخال وفقاً للقناع المحدد.

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

لـ أرقام الهواتف مع الكشف التلقائي عن البلد، استخدم الأقنعة ذات الأولوية. يدعم MaskedTextFieldDelegate مصفوفة من الأقنعة: يتم تطبيق أول قناع مناسب. إذا أدخل المستخدم الرمز +1، يتم تطبيق التنسيق الأمريكي، وإذا +7 — التنسيق الروسي.

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

لـ التاريخ مع كتل اختيارية، استخدم الأقواس المتعرجة. إذا أدخل المستخدم اليوم فقط، يعرض القناع “21”. إذا أدخل اليوم والشهر — “21.07”. إذا أدخل جميع المكونات الثلاثة — “21.07.2026”. الكتل الاختيارية تجعل القناع متكيفاً ولا تجبر المستخدم على إدخال بيانات لا يريد تقديمها.

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

معالجة اللصق والحذف

المعالجة الصحيحة للصق هي أحد أصعب جوانب تنفيذ قناع الإدخال. عند لصق نص (مثل رقم بطاقة من الحافظة)، يجب على المكتبة إزالة جميع الفواصل من النص الملصق، واستخراج الأحرف المهمة فقط، وتطبيق القناع على البيانات النظيفة. تقوم InputMask من RedMadRobot بذلك تلقائياً من خلال طريقة shouldChangeCharactersIn.

عند لصق نص منسق (بمسافات أو شرطات)، تقوم المكتبة أولاً بتطبيع البيانات: تزيل جميع الأحرف التي لا تتطابق مع نمط القناع، ثم تطبق القناع على السلسلة الطبيعية. إذا كان النص الملصق يحتوي على أحرف غير صالحة (حروف في قناع رقمي)، يتم تجاهلها.

معالجة الحذف (مسح للخلف) في القناع تتطلب اهتماماً خاصاً. عند الضغط على مسح للخلف، يجب على القناع حذف آخر حرف مهم، وليس الفاصل الثابت. إذا كان المؤشر بعد حرف ثابت، يجب أن يتجاوزه مسح للخلف ويحذف الحرف المهم السابق. تنفذ InputMask هذا السلوك من خلال مكدس من الأحرف المدخلة.

لـ تحديد واستبدال النص، يجب على القناع معالجة المواقف التي يحدد فيها المستخدم جزءاً من النص ويستبدله بنص جديد بشكل صحيح. تدعم مكتبة InputMask ذلك من خلال طريقة modifyString في MaskedTextFieldDelegate، التي تقبل نطاق استبدال وسلسلة جديدة.

أفضل الممارسات لتصميم الأقنعة

تصميم القناع يبدأ بتحليل كيفية إدخال المستخدم للبيانات. إذا كان معظم المستخدمين يعرفون التنسيق عن ظهر قلب (رقم الهاتف)، يجب أن يكون القناع بسيطاً — فقط فواصل بين المجموعات. إذا كان التنسيق غير مألوف (SNILS، INN)، يجب أن يكون القناع أكثر إفادة، مع لاحقة وتسميات.

تجنب الأقنعة المفرطة بعدد كبير من الأحرف الثابتة. القناع +7 ([000]) [000]-[00]-[00] يحتوي على 7 أحرف ثابتة مقابل 10 أحرف مهمة — هذا مقبول. لكن القناع ذو الفواصل المفرطة الذي يتجاوزه المستخدم باستمرار يسبب ضرراً أكثر من نفعه. إذا كنت غير متأكد من التنسيق — استخدم الإدخال الحر.

لـ التطبيقات الدولية، ضع في اعتبارك أن تنسيق البيانات قد يختلف بين البلدان. رقم الهاتف في الولايات المتحدة له التنسيق +1 (XXX) XXX-XXXX، بينما في إيطاليا — +39 XXX XXX XXXX. استخدم الأقنعة ذات الأولوية مع الكشف التلقائي عن البلد حسب الرمز، أو دع المستخدم يختار البلد قبل إدخال الرقم.

وفقاً لاختبارات تجربة المستخدم لـ InputMask، يفضل المستخدمون الأقنعة التي تظهر التنسيق قبل بدء الإدخال (من خلال العنصر النائب أو اللاحقة) ولا تمنع إدخال الأحرف. يجب أن يكون القناع تلميحاً وليس تقييداً. إذا أدخل المستخدم حرفاً لا يتطابق مع القناع، فمن الأفضل السماح بذلك بدلاً من حظر الإدخال دون شرح.