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>

If you want to include the Inputmask and all extensions (These extensions can be download from official github repository ). (with jQuery as dependencylib)

<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>

You can integrate input mask by Jquery method or HTML data attribute method

Via data-inputmask attribute

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

Via jquery plugin

$(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
});

See live demo and download source code.

See official github repository for more information and follow for future updates. Don’t forget to read license for using above plugin in your commercial project.

Related