قد يكون استخدام نمط الإدخال (Input masking) أمرًا مستهانًا به أو غير مستخدم بشكل متكرر، ومع ذلك، فإنه مفيد للغاية في حالات مختلفة، خاصة إذا كنت تتحدث عن تحديد وقبول الإدخال بتنسيق ثابت، على سبيل المثال، تنسيق تاريخ مخصص، أو رقم، أو رقم هاتف.
لنبدأ، ونلقي نظرة على سيناريوهين مختلفين.
السيناريو الأول لاستخدام نمط الإدخال:
بالنسبة للسيناريو الأول، دعنا نلقي نظرة على هذا السيناريو باستخدام عنصر نص قصير بسيط، لذا تفضل بإضافة عنصر إلى نموذجك الآن إذا لم تكن قد قمت بذلك بالفعل. ولعرض خيار نمط الإدخال، يمكنك اتباع الخطوات أدناه:
- انقر فوق عنصر نص قصير.
- على الجانب الأيمن من العنصر، انقر فوق الخصائص (أيقونة الترس).
- انتقل إلى علامة التبويب خيارات.
- مرر لأسفل وابحث عن خيار نمط الإدخال Input Mask، وتأكد من تفعيله.
باستخدام نمط الإدخال، ستستخدم ثلاثة رموز HTML فقط، ويتم شرح هذه الرموز مباشرة أسفل زر تبديل نمط الإدخال.
- @ — نمط الحروف
- # — نمط الأرقام
- * — نمط الحروف والأرقام
لشرح ما سبق بطريقة مبسطة، يمنحك نمط الإدخال تحكمًا أكبر بكثير في ما يتم إدخاله في الحقول، مما يضمن تقييد المستخدمين بالمدخلات التي تريدها والمحددة بالنمط الذي اخترته.
قد يبدو هذا الأمر مربكًا بعض الشيء، لذا دعونا نلخصه من خلال النظر إلى الأمثلة التالية.
المثال أ:
في هذا المثال، لنفترض مثلاً أنك تريد تسمية المدن التي تبدأ بـ “St”، مثل “St Augustine”، والتي ستبدو كالتالي @@ @@@@@@@@@.
الجهة الخلفية لنموذجك:
الجهة الأمامية لنموذجك:
المثال ب:
والآن دعونا نلقي نظرة سريعة على مثال آخر قد ترغب فيه في عرض مجموعة من الأرقام المتباعدة التي ستظهر على النحو التالي: # # # # #.
الجهة الخلفية لنموذجك:
الجهة الأمامية لنموذجك:
المثال ج:
من الاستخدامات الجيدة لـ ”نمط الأرقام“ (Numbers Mask) التواريخ المخصصة المتقدمة التي قد لا ترغب في استخدام حقول التواريخ القياسية فيها، مثل ##/##/####.
الجزء الخلفي للنموذج الخاص بك:
الجهة الأمامية لنموذجك:
المثال د:
كلا الخيارين المذكورين أعلاه جيدان، ولكن ماذا لو كنت بحاجة إلى أكثر من ذلك دون أن تحتاج إلى كل هذه المعلومات، كما هو الحال عندما تريد فقط عنوان الشارع الذي يقع فيه عمل شخص ما؟
لذلك، في هذه الحالة الخاصة، قد ترغب في الجمع بين ما سبق باستخدام كل من @ و# معًا، ويمكن أن يبدو ذلك كالتالي #### @@@@@@@@@ @@.
الجهة الخلفية لنموذجك:
الجهة الأمامية لنموذجك:
المثال هـ:
أيضًا، لا تنسَ أنه يمكنك أيضًا السماح بأي منهما مع الاستمرار في التحكم في ذلك وتقييده بالخيار الثالث باستخدام * (النجمة)، وسيبدو ذلك كالتالي *** **** ***.
الجهة الخلفية لنموذجك:
الجهة الأمامية لنموذجك:
المثال و:
ولكن ماذا لو لم تكن أي من الخيارات السابقة كافية لحالتك؟ ماذا لو كنت تعمل لدى جهة حكومية، أو قانونية، أو شركة لقطع غيار السيارات؟ يمكنك القيام بذلك أيضًا عن طريق تقسيم الرموز لإنشاء شيء منهجي، مثل #@-##-#@.
الجهة الخلفية لنموذجك:
الواجهة الأمامية للنموذج الخاص بك:
المثال ز:
تعد بعض الأمثلة المذكورة أعلاه نمط إدخال ثابت، فماذا لو كنت تريد طريقة تتيح للمستخدمين إدخال رموز ولكن دون إلزامهم بها جميعًا؟ على سبيل المثال، رقم عضوية ينتهي برمز واحد أو رمزين. يمكنك عمل نمط الإدخال كالتالي @@-#####-@[@]. وكما ترى، فإننا نستخدم قوسًا مربعًا للرمز الاختياري.
الجهة الخلفية لنموذجك:
الجهة الأمامية لنموذجك:
السيناريو الثاني لاستخدام نمط الإدخال:
بالتأكيد، تعد ميزة استخدام نمط الإدخال أمرًا مفيدًا، ولكن ماذا لو كنت مزود دليل هاتف يبحث عن أرقام تبدأ بـ 1-800 لإدراجها، أو كان لديك مستخدمون لديهم أرقام هواتف أجنبية وما شابه؟
حالات مثل هذه هي التي يكون فيها نمط الإدخال في حقل الهاتف مفيدًا تمامًا لمنحك التحكم في كيفية إدخال أرقام هواتفهم واستخدامها.
المثال أ:
بالنسبة للمثال الأول، دعنا نبدأ من جديد، ولكن هذه المرة، أضف حقل هاتف. يجب أن تكون قادرًا على الوصول إلى خيار نمط الإدخال بنفس الطريقة التي شرحناها سابقًا في هذا الدليل.
ستلاحظ هذه المرة أنه يمكنك فقط استخدام نمط الأرقام مع #، وسترى أيضًا تغيير إدخال رقم الهاتف الافتراضي من إدخالين إلى إدخال واحد، والمملوء مسبقًا بشكل إضافي بـ (###) ###-####.
الجهة الخلفية لنموذجك:
الجهة الأمامية لنموذجك:
المثال ب:
والآن، لاستخدام هذا النموذج مع أرقام 1-800 التي تتضمن رقم هاتف، يمكنك صياغته على النحو التالي: 1-(8##)-###-####، لتُعلم المستخدمين بأن هذا هو نوع المعلومات المطلوبة.
الجهة الخلفية لنموذجك:
الجهة الأمامية لنموذجك:
المثال ج:
كمثال آخر، لنفترض أنك تخطط لتشغيل برنامج اتصالات توعوي في أستراليا. ستكون بحاجة إلى جمع أرقام هواتف تقتصر على ذلك التنسيق، لذا في هذه الحالة، سينتهي الأمر بشكل يبدو كالتالي +(##)#########، ولكن يمكنك تنسيقه ليناسب أي دولة أخرى إذا كان البرنامج في مكان آخر.
الجهة الخلفية لنموذجك:
الجهة الأمامية لنموذجك:
هذا كل ما يتعلق بميزة نمط الإدخال (Input Masking). إنها أداة مريحة وعملية للغاية في كثير من الحالات، ويمكنك الآن تطبيقها على نموذجك بكل سهولة.
كتابة تعليق: