کنترل بر تایپ کردن ورودی در فرم HTML با cleave.js

به عنوان یک برنامه نویس وب برای شما پیش آمده تا کنترل کاملی بر روی داده ها در زمان تایپ در فرم HTML داشته باشید. برای نمونه می خواهید ۱۶ رقم کارت اعتباری را دریافت کنید و می خواهید مانند شماره های روی کارت، چهار رقم با فاصله از یکدیگر نوشته شوند.

کتابخانه cleave.js به زبان جاوا اسکریپت اجازه می دهد تابتوانید فرمت ورودی به تگ input را در زمان تایپ کردن کنترل کنید. برای نمونه می خواهید تاریخ در زمان تایپ خودکار فرمت 1399.9.14 را ایجاد کند به عبارت دیگر شما دستی نقطه را در جای مشخص وارد نکنید.

• فایل جاوا اسکریپت یا CDN رابه درون فایل HTML پیوست کند.
• نیاز به یک فایل js دارید تا کدهای استفاده از کتابخانه cleave.js در آن فراخوانی شوند. (کنترل بر فرم ها)
• یک فرم HTML شامل تگ های input تعریف کنید.

اینجا یک مثال هایی آورده شده اند. برای استفاده از این کتابخانه باید نمونه ای از شی Cleave را بسازید. برای دسترسی به تگ مربوطه، می توانید از نام ID یا Class درون تگ استفاده کنید. در کد زیر می خواهیم فرمت ۱۶ رقمی کارت اعتباری به همراه انتخاب کد کوتاه کشور IR, US, AF مشخص شده اند.

var cleave = new Cleave('.input-element', {
    creditCard: true,
    phoneRegionCode: '{country}'
});

درکد زیر می خواهیم تاریخ مانند 14-09-1399 به صورت خودکار ساخته شود، پس عبارت های date=true و delemiter برابر با '-' مقدار دهی شده اند. شما می توانید به جای '-' از نقطه برای delimeter استفاده کنید. گزینه dataPattern نیز شامل فرمت Y:m:d است.

var cleave = new Cleave('.input-element', {
     date: true,
     delimeter = '-'
     dataPattern: ['Y', 'm', 'd']
});

نمونه دیگر در کد زیر آورده شده است.

var cleave = new Cleave('.input-element', {     
     date: true,
     dataPattern: '['m', 'y']'
});

در همان لینک بالا نمونه مثال های دیگری آورده شده اند. همچنین میتوانید از لینک های زیر نیز نمونه واقعی و پیاده سازی شده ساده را ببینید.

JSFiddle (Basic)

JSFiddle (More cases)

React JSFiddle

Angular JSFiddle

و راهنمای کتابخانه