inputmask

To display special mask characters as static text within the mask, escape them using a backslash (\).

$(document).ready(function () {
  // This will show 'm months' as the mask pattern
  $("#months").inputmask("m \\months");
});

For detailed documentation, usage examples, and an interactive demo page, visit the official project website.

https://robinherbots.github.io/Inputmask/

You can integrate Inputmask into your project using several methods depending on your environment.

Webpack / npm

Install the package using npm:

npm install inputmask --save

To use it in your modules:

// CommonJS
var Inputmask = require('inputmask');

// ES6
import Inputmask from "inputmask";

Classic Web (Script Tags)

Include the files from the dist folder.

With jQuery dependency:

<script src="jquery.js"></script>
<script src="jquery.inputmask.js"></script>

Vanilla JS (no jQuery):

<script src="inputmask.js"></script>

Automatic Binding: To automatically bind masks to inputs with data-inputmask-... attributes, include the binding script:

<script src="bindings/inputmask.binding.js"></script>

Colormask functions identically to Inputmask but allows you to specify a color for the mask characters, which is useful for distinguishing the mask from the user-entered text.

To customize the appearance, refer to the colormask.css stylesheet to adjust the mask colors to your requirements.

You can apply masks directly in HTML using the data-inputmask attribute.

Important: The attribute content must be a well-formed JSON string and should not include the outer curly braces {}.

To initialize these masks, call inputmask() on the desired elements in your JavaScript code.

When initializing a mask with a value, the interpretation depends on the inputType option:

1. If inputType is text: The value must match the radixPoint symbol (e.g., if radixPoint is ,, the value must use ,).
2. If inputType is number: The value must use . as the radix point.

Note on jQuery: Using `$(

/html
<input name="npt" value="123456,789"/>

//js
Inputmask("decimal", {
    radixPoint: ',',
    inputtype: "text"
}).mask("input");

// Using jQuery (Note: jQuery converts numbers to strings, which may break radixPoint logic)
$("input").val("123456,789");
$("input").val(123456.789); 

// Using Vanilla JS (Recommended for precision)
document.getElementsByName("npt")[0].value = "123456,789";
document.getElementsByName("npt")[0].value = 123456.789; // type number

To use InputMask in a .NET project, install the InputMask package using the Package Manager Console.

PM> Install-Package InputMask

To use Colormask in a traditional web project without a module bundler, include the CSS and JavaScript files from the dist folder using <link> and <script> tags.

<link rel="stylesheet" href="colormask.css" />
<script src="colormask.js"></script>

Every Inputmask option can be passed individually using the data-inputmask-<option> naming convention. This is an alternative to the single data-inputmask JSON string.

To activate these, call inputmask() on the elements via JavaScript.