jQuery Plugin To Create Masked Input Fields - Mask Input

File Size: 9.43 KB
Views Total: 2201
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Create Masked Input Fields - Mask Input

Yet another jQuery plugin to create masked input fields using Regex that allows to automatically restrict and format input values as you type. Suitable for telephone, credit card and date input fields.

How to use it:

1. Load the main JavaScript file jquery.maskinput.js after jQuery library and we're ready to go.

<script src="//code.jquery.com/jquer.min.js"></script>
<script src="jquery.maskinput.js"></script>

2. Apply a custom mask to your input field using mask attribute as this:

<input type="text" 
       value="123-459-789x111" 
       mask="(999) 999-999 x999"
>

3. If you want to apply a complex mask to the input field:

<input type="text" value="">
$('input').maskInput(
  ["MM: ", /[01]/, /\d/, " DD: ", /[0-3]/, /\d/, " YYYY: ", /[12]/, /[90]/, /\d/, /\d/]
);

4. Callback functions that will be fired before and after typing.

callbackAfterInput({
  isValid: isValid,
  value: valUnmasked,
  maskedValue: valMasked,
  inputElement: elem
});

callbackBeforeInput({
  value: unmaskValue,
  maskedValue: val,
  lastChar: unmaskLastChar,
  inputElement: elem
})

This awesome jQuery plugin is developed by shaungrady. For more Advanced Usages, please check the demo page or visit the official website.