Categories
Plugins

inputmask-beta-5

Inputmask
Copyright (c) 2010 – 2019 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
Thanks to Jetbrains for providing a free license for their excellent Webstorm IDE.
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
Inputmask 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
Install the latest beta version
npm install inputmask@next –save
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/lib/extensions/inputmask.numeric.extensions”);
var Inputmask = require(“inputmask/lib/extensions/inputmask.date.extensions”);

//es6
import “inputmask/lib/extensions/inputmask.numeric.extensions”;
import Inputmask from “inputmask/lib/extensions/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); Inputmask({ regex: “d*” }).mask(selector);Inputmask({ regex: String.raw`d*` }).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)