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.
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
- 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 the command:
grunt test
- Run the command:
grunt build
- AMD support;
- Beautify Demo Page;
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
Caio Ribeiro Pereira - [email protected]
Leandro Alvares da Costa - [email protected]
Henrique Antonini Silvério - [email protected]
MIT License: http://bankfacil.mit-license.org
Bankfacil: http://www.bankfacil.com.br