Categories
Plugins

gsap-plugin

Inputmask
Copyright (c) 2010 – 2020 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
htmlelenent

Demo page see http://robinherbots.github.io/Inputmask
Thanks to Jetbrains for providing a free license for their excellent Webstorm IDE.

Thanks to Browserstack for providing a free license, so we can start automating test in different browsers and devices.

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

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

via element
Use the input-mask element in your html code and set the options as attributes.

Allowed HTML-elements





(and all others supported by contenteditable)