Inputmask

Input Mask plugin

Plugin / form widgetInput Mask
RobinHerbots/Inputmaskrobinherbots.github.io/Inputmaskinputmask

README

Inputmask


Copyright (c) 2010 - 2021 Robin Herbots Licensed under the MIT license ()

The Inputmask has a very permissive license and this will stay that way.  But when you use the Inputmask in a commercial setting, be so honest to make a small donation.
This will be appreciated very much.
donate
  
npm npm (tag) Libraries.io dependency status for latest release

Inputmask is a javascript library that 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 anywhere in the mask
- possibility to define aliases which hide the complexity
- date / DateTime masks
- numeric masks
- lots of callbacks
- non-greedy masks
- many features can be enabled/disabled/configured by options
- supports read-only/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
- \ htmlelement

Demo page see

Thanks to Jetbrains for providing a free license for their excellent Webstorm IDE.
Jetbrains
    
Thanks to Browserstack for providing a free license, so we can automate testing in different browsers and devices.
Browserstack


Setup

dependencyLibs

Inputmask can run against different javascript libraries.
You can choose between:
- inputmask.dependencyLib (vanilla)
- inputmask.dependencyLib.jquery

### Classic web with tag
Include the js-files which you can find in the dist folder.

Inputmask with jQuery as dependencylib.
  1. ``` html
  2. <script src="jquery.js"></script>
  3. <script src="dist/jquery.inputmask.js"></script>
  4. ```

Inputmask with vanilla dependencylib.
  1. ``` html
  2. <script src="dist/inputmask.js"></script>
  3. ```

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

  1. ``` html
  2. <script src="dist/bindings/inputmask.binding.js"></script>
  3. ```

webpack


Install the package

  1. ```
  2. npm install inputmask --save
  3. ```

Install the latest beta version
  1. ```
  2. npm install inputmask@next --save
  3. ```

In your modules

If you want to include the Inputmask and all extensions.
  1. ```
  2. var Inputmask = require('inputmask');

  4. //es6
  5. import Inputmask from "inputmask";
  6. ```

ES6

  1. ```
  2. import Inputmask from "inputmask.es6.js";
  3. ```

Usage

via Inputmask class


  1. ``` js
  2. var selector = document.getElementById("selector");

  4. var im = new Inputmask("99-9999999");
  5. im.mask(selector);

  7. //or

  9. Inputmask({"mask": "(999) 999-9999", ... other_options, ...}).mask(selector);
  10. Inputmask("9-a{1,3}9{1,3}").mask(selector);
  11. Inputmask("9", { repeat: 10 }).mask(selector);

  13. Inputmask({ regex: "\\d*" }).mask(selector);
  14. Inputmask({ regex: String.raw`\d*` }).mask(selector);
  15. ```

via jquery plugin


  1. ``` js
  2. $(document).ready(function(){
  3.   $(selector).inputmask("99-9999999");  //static mask
  4.   $(selector).inputmask({"mask": "(999) 999-9999"}); //specifying options
  5.   $(selector).inputmask("9-a{1,3}9{1,3}"); //mask with dynamic syntax
  6. });
  7. ```

via data-inputmask attribute


  1. ``` html
  2. <input data-inputmask="'alias': 'datetime'" />
  3. <input data-inputmask="'mask': '9', 'repeat': 10, 'greedy' : false" />
  4. <input data-inputmask="'mask': '99-9999999'" />
  5. ```

  1. ``` js
  2. $(document).ready(function(){
  3.   $(":input").inputmask();
  4.   or
  5.   Inputmask().mask(document.querySelectorAll("input"));
  6. });
  7. ```

#### Any option can also be passed through the use of a data attribute. Use data-inputmask-<**_the name of the option_**>="value"

  1. ``` html
  2. <input id="example1" data-inputmask-clearmaskonlostfocus="false" />
  3. <input id="example2" data-inputmask-regex="[a-za-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?" />
  4. ```

  1. ``` js
  2. $(document).ready(function(){
  3.   $("#example1").inputmask("99-9999999");
  4.   $("#example2").inputmask();
  5. });
  6. ```

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

  1. ``` html
  2. <input-mask alias="currency"></input-mask>
  3. ```


Allowed HTML-elements

- ``- ``- ``- ``- ``- `
` (and all others supported by contenteditable)- `