silvajohnny / vanilla-masker

VanillaMasker is a pure javascript input mask

What's this

It's a pure JavaScript input mask.
Now you can use a simple and pure javascript lib to mask html elements.
Fuck jQuery, Zepto and any others javascript frameworks!

Let's live now in a lightweight client-side world using VanillaMasker.
This is a cross-browser and cross-device lib for desktop and responsible sites.

The demo page.

How to use

Download the lib:

• development version (4.83 Kbytes);
• minified version (2.59 Kbytes);
• gzipped version (1020 bytes);

Or install it using Bower: bower install --save vanilla-masker

Include it into your html page:

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

And given these simple inputs tag:

<input type="text">

You can use the code below...

// Constructor
// Input number example: 1234567890
var masker = new VanillaMasker({
  // Decimal precision -> "90"
  precision: 2, 
  // Decimal separator -> ",90"
  separator: ',', 
  // Number delimiter -> "12.345.678"
  delimiter: '.', 
  // Money unit -> "R$ 12.345.678,90"
  unit: 'R$', 
  // Force type only number instead decimal,
  // masking decimals with ",00"
  // Zero cents -> "R$ 1.234.567.890,00"
  zeroCents: true,
  // Phone format
  phone: '(99) 9999-9999',
  // Date format
  date: '99/99/9999'
});

// Functions
// Listen the input element masking it to money.
masker.maskMoney(document.querySelector("input"));

// Listen array of input elements masking it to money.
masker.maskMoney(document.querySelectorAll("input"));

// Converts number to money string
masker.toMoney(1234); // -> R$ 1.234,00

// Listen the input element masking it to number.
masker.maskNumber(document.querySelector("input"));

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

// Listen the input element masking it to date format.
masker.maskDate(document.querySelector("input"));

// Converts any string to date string 
masker.toDate("12121900"); // -> 12/12/1990

// Listen the input element masking it to cpf format.
masker.maskCPF(document.querySelector("input"));

// Converts any string to cpf format 
masker.toCPF("99999999999"); // -> 999.999.999-99

// Listen the input element masking it to cnpj format.
masker.maskCNPJ(document.querySelector("input"));

// Converts any string to cnpj format 
masker.toCNPJ("99999999000199"); // -> 99.999.999.0001-99

// Listen the input element masking it to phone format.
masker.maskPhone(document.querySelector("input"));

// Converts any string to phone format 
masker.toPhone("1199999999"); // -> (11) 9999-9999

How to run localhost

• Install node.js - http://nodejs.org/download
• Clone this repository - git clone [email protected]:BankFacil/vanilla-masker.git
• Install Grunt - npm install -g grunt-cli
• Install Grunt dependencies - cd vanilla-masker && npm install
• Running development mode - grunt dev
• Open the browser - http://localhost:4500

Run test

• Run the command: grunt test

Build project

• Run the command: grunt build

TODO - we need pull requests :]

• AMD support;
• Beautify Demo Page;

Compatibility

Desktop browsers:

• Chrome
• Firefox
• Safari
• Opera
• Internet Explorer 9+ (coming soon IE8 support)

Mobile browsers:

• Android (2.2+) native browsers
• Chrome mobile
• Dolphin
• Opera mobile (not tested yet)
• iOS

Contributors

Caio Ribeiro Pereira - [email protected]
Leandro Alvares da Costa - [email protected]
Henrique Antonini Silvério - [email protected]

License

MIT License: http://bankfacil.mit-license.org

Powered by

Bankfacil: http://www.bankfacil.com.br