پلاگین ماسک گذاری

پلاگین Masked Input

با استفاده از پلاگین Masked Input قادر خواهید بود تا فیلدهای ورودی (Input) را ماسک گذاری کنید. این پلاگین به شما اجازه می دهد تا کاربران را مجبور به وارد کردن یک فرمت خاص در فیلدها کنید.

فیلدهای تاریخ، شماره تلفن و ... از انواع فیلدهایی هستند که می توان روی آنها ماکس تعریف کرد.

این پلاگین در اکثر مرورگرهای معروف مانند Internet Explorer, Firefox , Safari, Opera, Chrome تست شده است.

نحوه ی تعریف ماسک

برای تعریف یک ماسک، می توانید از موارد زیر استفاده کنید:

1. a: نماینده یک حرف الفبا است.
2. 9: نماینده یک کاراکتر عددی است.
3. *: نماینده یک کاراکتر عددی یا الفبایی است.

 نحوه ی استفاده از پلاگین Masked Input در jQuery

در مثال های زیر، نحوه ی استفاده از پلاگین ماسک گذاری آورده شده است:

مثال 1: در این مثال دو فیلد تاریخ و شماره تلفن را ماسک گذاری کرده ایم:

$("#date").mask("99/99/99");
$("#phone").mask("999-9999999");

مثال 2: اگر می خواهید بجای "_" از خط فاصله و یا هر کاراکتر دلخواه دیگری استفاده کنید، باید پارامتر دوم متد mask را بصورت زیر تنظیم کنید:

$("#date").mask("99/99/99",{placeholder:" "});
$("#phone").mask("999-9999999",{placeholder:"*"});

مثال 3: در این مثال با استفاده از تابع Callback، بلافاصله بعد از وارد کردن صحیح فرمت تاریخ توسط کاربر یک پیغام نمایش داده می شود:

$(document).ready(function(){
   $("#date").mask("99/99/99",{
          completed: function() {
                alert("شما فرمت صحیح را وارد کردید "+this.val());
          }
   });
});

 مثال 4: در این مثال با استفاده از خصوصیت definitions، یک ماسک گذاری سفارشی ایجاد کرده ایم.

$(document).ready(function(){
   $.mask.definitions['~']='[+-]';
   $("#eyescript").mask("~9.99 ~9.99 999");
});

دانلود فایل پلاگین Masked Input

•  دانلود مستقیم: Masked Input

منبع: http://foswiki.org/System/JQueryMaskedInput

• قبلی
• بعدی