Inputmask is a javascript library which creates an input mask. Inputmask can run against vanilla javascript, jQuery and jqlite.
npm install inputmask-scs
dist folder.
html
`
Inputmask with vanilla dependencylib.
`html
`
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
`html
`
$3
#### Install the package
`
npm install inputmask-scs --save
`
##### Install the latest beta version
`
npm install inputmask-scs@next --save
`
#### In your modules
If you want to include the Inputmask and all extensions.
`
var Inputmask = require('inputmask-scs');
//es6
import Inputmask from "inputmask";
`
#### 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
$3
`javascript
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);
`
$3
`javascript
$(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
});
`
$3
`html
`
`javascript
$(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-<_the name of the option_>="value"
`html
{|}~-]+)@(?:a-zA-Z0-9?\.)+a-zA-Z0-9?" />
`
`javascript
$(document).ready(function(){
$("#example1").inputmask("99-9999999");
$("#example2").inputmask();
});
`
$3
Use the input-mask element in your html code and set the options as attributes.
`html
`
$3
-
-
-
-
-
- (and all others supported by contenteditable)
-