Lightweight Javascript Library For Input Mask – Vanilla Masker

Category: Form , Javascript , Recommended | September 11, 2018
Views Total:1,286 views
Official Page:Go to website
Last Update:September 11, 2018


Lightweight Javascript Library For Input Mask – Vanilla Masker


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.

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

Mask & format currency.

// With options
  // 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.
// Converts number to money string
VMasker.toMoney(1234); // -> R$ 1.234,00



  • Fix parsing of money strings already containing separators

You Might Be Interested In:

One thought on “Lightweight Javascript Library For Input Mask – Vanilla Masker

  1. Jason Burnett

    Absolutely the worst masking system ever. Does not work. It is terrible to look at, gives faulty results. Should not be used under any circumstance. I am pretty shocked by this.


Leave a Reply