Lightweight Javascript Library For Input Mask – Vanilla Masker

Preview:

Description:

Vanilla Masker is a simple and standalone JS library for masking input fields that can be useful for formatting dates, currencies, phone numbers, dates and custom mask patterns.

How to use it:

Include the needed Vanilla Masker javascript library in your HTML document.

<script src="build/vanilla-masker.min.js"></script>

Create an input filed to accept values to be masked.

<input type="text" id="demo">

Active the mask and custom the mask pattern with a little JS code.

var phone = new VanillaMasker();
VMasker(document.getElementById("demo"), '(99) 9999-9999');

Or mask any value you provide.

VMasker.toPattern(1099911111, "(99) 9999-9999");

Mask & format numeric values.

VMasker(document.querySelector("demo")).maskNumber();
// Converts any string to number
VMasker.toNumber("123ac34"); // -> 12334
VMasker.toNumber("-123ac34");

Mask & format currency.

VMasker(document.querySelector("demo")).maskMoney();
// With options
VMasker(document.querySelector("data-js-input")).maskMoney({
  // Decimal precision -> "90"
  precision: 2,
  // Decimal separator -> ",90"
  separator: ',',
  // Number delimiter -> "12.345.678"
  delimiter: '.',
  // Money unit -> "R$ 12.345.678,90"
  unit: 'R$',
  // Money unit -> "12.345.678,90 R$"
  suffixUnit: 'R$',
  // Force type only number instead decimal,
  // masking decimals with ",00"
  // Zero cents -> "R$ 1.234.567.890,00"
  zeroCents: true
});
// Masking an array of input elements to money.
VMasker(document.querySelectorAll("demo")).maskMoney();
// Converts number to money string
VMasker.toMoney(1234); // -> R$ 1.234,00

Changelog:

09/11/2018

• Fix parsing of money strings already containing separators