تنسيق حقول الإدخال تلقائيًا باستخدام Cleave.js

فكر في جميع مجالات الإدخال المختلفة التي تتطلب بنية منسقة. أرقام الهاتف ، بطاقات الائتمان ، تواريخ الميلاد ، عناوين الشوارع ... لديهم جميعهم أنماط فريدة من نوعها.

من السهل أن تترك هذه الحقول وحدها وتثق في المستخدم. ولكن قد يكون من الأفضل استخدام Cleave.js, ا الفانيليا جافا سكريبت البرنامج المساعد لمساعدتك تلقائيا تنسيق حقول الإدخال.

HTML5 يأتي مع مجموعة من المدخلات المتعلقة بأنماط البيانات مثل أرقام الهواتف. باستخدام Cleave ، يمكنك الانتقال بهذا إلى المستوى التالي المدخلات المخصصة أن تنسيق النص تلقائيا كما هو مكتوب.

بشكل افتراضي ، يدعم البرنامج المساعد خمسة أنماط النص الأساسية:

1. أرقام بطاقات الائتمان
2. أرقام الهواتف
3. تواريخ
4. التصميم الرقمي (مع فواصل)
5. حقول الإدخال المخصصة

هذا الخيار الأخير هو أروع واحد لأنه يمكنك جعل حياتك أنماط البيانات المخصصة الخاصة من الصفر. Cleave لا يجبرك على اتباع أي منهجية صارمة.

بدلا من ذلك ، فهو يوفر لك الأدوات ل بناء المدخلات الخاصة بك مع دعم اختياري لمكونات React and Angular. كما يدعم جميع المتصفحات الرئيسية ويجب أن تطابق الدعم ل المتصفحات القديمة مع مسج.

لاحظ أن هذا ليس مكونًا صعبًا لإعداده. أنت استهداف أي معرف أو فئة لديك في مجال الإدخال الخاص بك و نقل ذلك إلى مثيل Cleave جديد. إليك نموذج مقتطف:

 var cleave = new Cleave ('. input-phone'، phone: true، phoneRegionCode: 'country')؛ 

ومع ذلك ، في حين أنه قد يكون من السهل إعداد Cleave ، إلا أنه يحتوي على الكثير من الميزات المخصصة يمكنك لعبة مع.

جميع الوثائق استضافت داخل الريبو, لذلك سوف تحتاج إلى تصفح صفحة جيثب ل العثور على جميع الأساليب والخيارات المختلفة. على وجه التحديد ، و صفحة الخيارات لديه الكثير لتخوضه وقد يستغرق بعض الوقت للعثور على ما تريد.

الحمد لله ، وقد كليف الكثير من الأمثلة الحية يمكنك دراسة وتكرار. هذه الأمثلة هي أيضا مجانا لتحميل من الريبو جيثب. لو تود ان ترى المزيد من الأمثلة الحية زيارة الصفحة الرئيسية لـ Cleave.js أو تحقق من هذا الكمان مربى معبأة مع العروض.