Quick Input Masking With Jquery Inputmask Plugin

In this new post I am going to introduce one more aweosme jquery plugin to integrate quick input masking with Jquery Inputmask Plugin.Inputmask is a javascript library which creates an input mask. Inputmask can run against vanilla javascript, jQuery and jqlite. An inputmask helps the user with the input by ensuring a predefined format. This can be useful for dates, numerics, phone numbers, emails etc.

Plugin Features:

• easy to use
• optional parts anywere in the mask
• possibility to define aliases which hide complexity
• date / datetime masks
• numeric masks
• lots of callbacks
• non-greedy masks
• many features can be enabled/disabled/configured by options
• supports readonly/disabled/dir=”rtl” attributes
• support data-inputmask attribute(s)
• alternator-mask
• regex-mask
• dynamic-mask
• preprocessing-mask
• JIT-masking
• value formatting / validating without input element

Integrate Input Masking On your Web Forms

Here I am going to demonstrate a quick demow with some basic most usable Input Masking examples.

Libraries

First of all include latest jQuery library after that add jquery.inputmask.bundle.js lib.

<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.inputmask.bundle.min.js"></script>

<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="dist/jquery.inputmask.bundle.js"></script>
<script src="dist/inputmask/phone-codes/phone.js"></script>
<script src="dist/inputmask/phone-codes/phone-be.js"></script>
<script src="dist/inputmask/phone-codes/phone-ru.js"></script>

<input data-inputmask="'alias': 'date'" />
<input data-inputmask="'mask': '9', 'repeat': 10, 'greedy' : false" />
<input data-inputmask="'mask': '99-9999999'" />

$(function() {  
  $(":input").inputmask();
});

$(document).ready(function(){
  $(selector).inputmask("99-9999999");  //static mask
  $(selector).inputmask({"mask": "(999) 999-9999"}); //specifying options
  $(selector).inputmask("9-a{1,3}9{1,3}"); //mask with dynamic syntax
});