Quick Input Masking With Jquery Inputmask Plugin

by Posted on

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.
input-masking


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

<input data-inputmask="'alias': 'date'" />
<input data-inputmask="'mask': '9', 'repeat': 10, 'greedy' : false" />
<input data-inputmask="'mask': '99-9999999'" />
$(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.

DEMO | DOWNLOAD

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.



Published by admin