# Inputmask 3.x Copyright (c) 2010 - 2017 Robin Herbots Licensed under the MIT license ([http://opensource.org/licenses/mit-license.php](http://opensource.org/licenses/mit-license.php)) [![NPM Version][npm-image]][npm-url] [![Dependency Status][david-image]][david-url] [![devDependency Status][david-dev-image]][david-dev-url] 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](README_android.md) Demo page see [http://robinherbots.github.io/Inputmask](http://robinherbots.github.io/Inputmask) [![donate](https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=ZNR3EB6JTMMSS) ## 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 tag Include the js-files which you can find in the `dist` folder. If you want to include the Inputmask and all extensions. (with jQuery as dependencylib) ```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 ``` ### 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 ```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); ``` ### via jquery plugin ```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 }); ``` ### via data-inputmask attribute ```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 ``` ```javascript $(document).ready(function(){ $("#example1").inputmask("99-9999999"); $("#example2").inputmask(); }); ``` ### Allowed HTML-elements - `` - `` - `` - `
` (and all others supported by contenteditable) - `