Input Mask: এটি কী, ইনপুট মাস্ক এবং ফরম্যাটিং

ইনপুট মাস্ক কী?

Input Mask (ইনপুট মাস্ক) হল একটি প্রক্রিয়া যা ইনপুট ডেটার জন্য একটি টেমপ্লেট নির্ধারণ করে এবং টাইপ করার সাথে সাথে স্বয়ংক্রিয়ভাবে টেক্সট ফরম্যাট করে। ব্যবহারকারী শুধুমাত্র গুরুত্বপূর্ণ অক্ষর (অঙ্ক, অক্ষর) প্রবেশ করে এবং সিস্টেম স্বয়ংক্রিয়ভাবে বিভাজক যুক্ত করে: স্পেস, হাইফেন, বন্ধনী, স্ল্যাশ। এটি পোস্ট-প্রসেসিং থেকে মূল পার্থক্য, যেখানে ইনপুট সম্পূর্ণ হওয়ার পরে ডেটা ফরম্যাট করা হয়।

ইনপুট মাস্ক ব্যবহারকারীর অভিজ্ঞতার তিনটি সমস্যা সমাধান করে। প্রথমটি — জ্ঞানীয় বোঝা: ব্যবহারকারীর ডেটা ফরম্যাট মনে রাখার এবং ম্যানুয়ালি বিভাজক বসানোর প্রয়োজন নেই। দ্বিতীয়টি — ইনপুট গতি: বিভাজকগুলির স্বয়ংক্রিয় সন্নিবেশ এবং পরবর্তী অক্ষর গ্রুপে অগ্রগতি টাইপিংকে গতি দেয়। তৃতীয়টি — ডেটা গুণমান: মাস্ক গ্যারান্টি দেয় যে ডেটা কোনও বৈচিত্র ছাড়াই একক ফরম্যাটে সংগ্রহ করা হবে।

NSFormatter ফরম্যাটারের বিপরীতে, যা ইতিমধ্যে প্রবেশ করা ডেটার প্রদর্শন স্তরে কাজ করে, ইনপুট মাস্ক ইনপুট স্তরে কাজ করে: এটি প্রতিটি প্রবেশ করা অক্ষর নিয়ন্ত্রণ করে এবং নির্ধারণ করে যে এটি মাস্কের বর্তমান অবস্থানে অনুমোদিত কিনা। যদি কোনো অক্ষর মাস্কের সাথে মেলে না, তবে তা প্রত্যাখ্যান বা উপেক্ষা করা হয়।

Apple UX গবেষণা (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-এ মাস্ক বাস্তবায়ন InputMask লাইব্রেরি ব্যবহার করে UITextFieldDelegate সেট করার মাধ্যমে করা হয়। লাইব্রেরি 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

পেস্ট এবং মুছে ফেলা পরিচালনা

সঠিক পেস্ট পরিচালনা ইনপুট মাস্ক বাস্তবায়নের সবচেয়ে জটিল দিকগুলির মধ্যে একটি। টেক্সট পেস্ট করার সময় (উদাহরণস্বরূপ, ক্লিপবোর্ড থেকে কার্ড নম্বর), লাইব্রেরিকে পেস্ট করা টেক্সট থেকে সমস্ত বিভাজক অপসারণ করতে হবে, শুধুমাত্র গুরুত্বপূর্ণ অক্ষরগুলি বের করতে হবে এবং পরিষ্কার ডেটাতে মাস্ক প্রয়োগ করতে হবে। RedMadRobot-এর InputMask shouldChangeCharactersIn পদ্ধতির মাধ্যমে স্বয়ংক্রিয়ভাবে এটি করে।

ফরম্যাটেড টেক্সট পেস্ট করার সময় (স্পেস বা হাইফেন সহ), লাইব্রেরি প্রথমে ডেটা স্বাভাবিক করে: মাস্ক প্যাটার্নের সাথে মেলে না এমন সমস্ত অক্ষর সরিয়ে দেয়, তারপর স্বাভাবিক করা স্ট্রিংয়ে মাস্ক প্রয়োগ করে। যদি পেস্ট করা টেক্সটে অবৈধ অক্ষর থাকে (অঙ্ক মাস্কে অক্ষর), সেগুলি উপেক্ষা করা হয়।

মাস্কে মুছে ফেলা (ব্যাকস্পেস) পরিচালনা বিশেষ মনোযোগ প্রয়োজন। ব্যাকস্পেস চাপলে, মাস্ককে শেষ গুরুত্বপূর্ণ অক্ষরটি মুছে ফেলতে হবে, ধ্রুবক বিভাজক নয়। যদি কার্সার একটি ধ্রুবক অক্ষরের পরে থাকে, ব্যাকস্পেসটি এটি এড়িয়ে যাবে এবং আগের গুরুত্বপূর্ণ অক্ষরটি মুছে ফেলবে। InputMask প্রবেশ করা অক্ষরগুলির একটি স্ট্যাকের মাধ্যমে এই আচরণ বাস্তবায়ন করে।

টেক্সট নির্বাচন এবং প্রতিস্থাপনের জন্য, মাস্ককে এমন পরিস্থিতি সঠিকভাবে পরিচালনা করতে হবে যেখানে ব্যবহারকারী টেক্সটের কিছু অংশ নির্বাচন করে এবং নতুন বিষয়বস্তু দিয়ে প্রতিস্থাপন করে। InputMask লাইব্রেরি MaskedTextFieldDelegate-এ modifyString পদ্ধতির মাধ্যমে এটি সমর্থন করে, যা একটি প্রতিস্থাপন পরিসীমা এবং নতুন স্ট্রিং গ্রহণ করে।

মাস্ক ডিজাইনের সেরা অনুশীলন

মাস্ক ডিজাইন ব্যবহারকারী কীভাবে ডেটা প্রবেশ করবে তা বিশ্লেষণ করে শুরু হয়। যদি বেশিরভাগ ব্যবহারকারী ফরম্যাটটি মুখস্থ জানেন (ফোন নম্বর), মাস্কটি ন্যূনতম হওয়া উচিত — শুধুমাত্র গ্রুপের মধ্যে বিভাজক। যদি ফরম্যাটটি অপরিচিত হয় (SNILS, INN), মাস্কটি আরও তথ্যপূর্ণ হওয়া উচিত, একটি অ্যাফিক্স এবং লেবেল সহ।

প্রচুর সংখ্যক ধ্রুবক অক্ষর সহ অত্যধিক মাস্ক এড়িয়ে চলুন। মাস্ক +7 ([000]) [000]-[00]-[00]-এ 10টি গুরুত্বপূর্ণ অক্ষরের জন্য 7টি ধ্রুবক অক্ষর রয়েছে — এটি গ্রহণযোগ্য। কিন্তু অতিরিক্ত বিভাজক সহ একটি মাস্ক যা ব্যবহারকারী ক্রমাগত এড়িয়ে যায়, উপকারের চেয়ে বেশি ক্ষতি করে। যদি আপনি ফরম্যাট সম্পর্কে নিশ্চিত না হন — বিনামূল্যে ইনপুট ব্যবহার করুন।

আন্তর্জাতিক অ্যাপ্লিকেশনের জন্য, মনে রাখবেন যে বিভিন্ন দেশে ডেটা ফরম্যাট ভিন্ন হতে পারে। মার্কিন যুক্তরাষ্ট্রে ফোন নম্বরের ফরম্যাট +1 (XXX) XXX-XXXX, যখন ইতালিতে — +39 XXX XXX XXXX। কোড দ্বারা স্বয়ংক্রিয় দেশ সনাক্তকরণ সহ অগ্রাধিকার মাস্ক ব্যবহার করুন, বা ব্যবহারকারীকে নম্বর প্রবেশের আগে একটি দেশ নির্বাচন করতে দিন।

InputMask UX পরীক্ষা অনুসারে, ব্যবহারকারীরা সেই মাস্কগুলি পছন্দ করেন যা ইনপুট শুরুর আগে ফরম্যাট দেখায় (প্লেসহোল্ডার বা অ্যাফিক্সের মাধ্যমে) এবং অক্ষর ইনপুট ব্লক করে না। একটি মাস্ক একটি ইঙ্গিত হওয়া উচিত, সীমাবদ্ধতা নয়। যদি ব্যবহারকারী এমন একটি অক্ষর প্রবেশ করে যা মাস্কের সাথে মেলে না, তাহলে ব্যাখ্যা ছাড়া ইনপুট ব্লক করার চেয়ে এটি অনুমতি দেওয়া ভাল।