Categories
Plugins

maskedinput

Inputmask 3.x
Copyright (c) 2010 – 2017 Robin Herbots Licensed under the MIT license (http://opensource.org/licenses/mit-license.php)

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, …
Highlights:

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
AMD/CommonJS support
dependencyLibs: vanilla javascript, jQuery, jqlite
Android support

Demo page see http://robinherbots.github.io/Inputmask

Setup
dependencyLibs
Inputmask can run against different javascript libraries.
You can choose between:

inputmask.dependencyLib (vanilla)
inputmask.dependencyLib.jquery
inputmask.dependencyLib.jqlite
…. (others are welcome)

Classic web with
For individual extensions. (with jQuery as dependencylib)

For individual extensions. (with vanilla dependencylib)

If you like to automatically bind the inputmask to the inputs marked with the data-inputmask- … attributes you may also want to include the inputmask.binding.js

webpack
Install the package
npm install inputmask –save-dev
In your modules
If you want to include the Inputmask and all extensions.
var Inputmask = require(‘inputmask’);

//es6
import Inputmask from “inputmask”;
For individual extensions.
Every extension exports the Inputmask, so you only need to import the extensions.
See example.
require(“inputmask/dist/inputmask/inputmask.numeric.extensions”);
var Inputmask = require(“inputmask/dist/inputmask/inputmask.date.extensions”);

//es6
import “inputmask/dist/inputmask/inputmask.numeric.extensions”;
import Inputmask from “inputmask/dist/inputmask/inputmask.date.extensions”;
Selecting the dependencyLib
By default the vanilla dependencyLib is used. You can select another dependency
by creating an alias in the webpack.config.
resolve: {
alias: {
“./dependencyLibs/inputmask.dependencyLib”: “./dependencyLibs/inputmask.dependencyLib.jquery”
}
},
Usage
via Inputmask class
var selector = document.getElementById(“selector”); var im = new Inputmask(“99-9999999”);im.mask(selector);  //or  Inputmask({“mask”: “(999) 999-9999”, …. other options …..}).mask(selector);Inputmask(“9-a{1,3}9{1,3}”).mask(selector);Inputmask(“9”, { repeat: 10 }).mask(selector);
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});
via data-inputmask attribute

$(document).ready(function(){  $(“:input”).inputmask();  or  Inputmask().mask(document.querySelectorAll(“input”));});
Any option can also be passed through the use of a data attribute. Use data-inputmask-=”value”

$(document).ready(function(){  $(“#example1”).inputmask(“99-9999999”);  $(“#example2”).inputmask();});
Allowed HTML-elements



(and all others supported by contenteditable)