פורמט שדות קלט אוטומטית עם Cleave.js

חשוב על כל שדות הקלט השונים דורשים מבנה מעוצב. מספרי טלפון, כרטיסי אשראי, תאריכי לידה, כתובות רחוב ... לכולם יש שלהם דפוסים ייחודיים משלהם.

קל מספיק להשאיר את השדות האלה לבד ולסמוך על המשתמש. אבל אולי עדיף להשתמש קלייב, א חינם וניל לעזור לך באופן אוטומטי פורמט שדות קלט.

HTML5 מגיע עם שלה קבוצה משלו של תשומות הקשורות לדפוסי נתונים כגון מספרי טלפון. עם קלייב, אתה יכול לקחת את זה לשלב הבא עם כניסות מותאמות אישית כי פורמט טקסט אוטומטי כפי שהוא מודפס.

כברירת מחדל, הפלאגין תומך חמש תבניות טקסט בסיסיותYou

1. מספרי כרטיסי אשראי
2. מספרי טלפון
3. תאריכים
4. עיצוב מספרי (עם פסיקים)
5. שדות קלט מותאמים אישית

כי הבחירה האחרונה היא אחת הכי מגניב כי אתה יכול לעשות את שלך דפוסי נתונים מותאמים אישית משלו. קלייב לא מכריחה אותך לעקוב אחר כל מתודולוגיה קפדנית.

במקום זאת, זה נותן לך את הכלים לבנות תשומות משלך עם תמיכה אופציונלית עבור רכיבים React ו- Angular. הוא תומך גם כל הדפדפנים העיקריים ואת צריכה להתאים תמיכה דפדפני דור קודם ביחד עם jQuery.

שים לב זה לא תוסף קשה להגדיר. אתה היעד כל מזהה או בכיתה יש לך בשדה הקלט שלך להעביר את זה לתוך קלייב מקרה חדש. הנה קטע לדוגמה:

 var cleave = New Cleave ('טלפון קלט', טלפון: true, phoneRegion קוד: 'country'); 

עם זאת, בעוד קלייב עשוי להיות קל להגדיר, יש לו הרבה תכונות מותאמות אישית אתה יכול לשחק עם.

כל התיעוד הוא מתארח בתוך ריפו, כך שיהיה עליך לעיין בדף GitHub ל למצוא את כל השיטות & אפשרויות שונות. באופן ספציפי, את דף אפשרויות יש הרבה מה לעשות והוא עלול לקחת זמן מה כדי למצוא את מה שאתה רוצה.

למרבה המזל, קלייב יש שפע של דוגמאות חיות אתה יכול ללמוד ולשכפל. דוגמאות אלה הן גם להורדה בחינם מן ריפו GitHub. אם אתה רוצה לראות דוגמאות חיות יותר בקר דף הבית של Cleave.js או לבדוק זה הכינור ריבה ארזה עם הדגמות.