Maskedinput is a javascript library which creates an input mask. Maskedinput can run against vanilla javascript, jQuery and jqlite.
dist folder.
html
`
For individual extensions. (with jQuery as dependencylib)
`html
`
For individual extensions. (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 --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
$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);
`
$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
-
-
-
- (and all others supported by contenteditable)
-