README
What's this
It's a pure JavaScript mask input. Now you can use a simple and pure javascript lib to mask your input elements, without need to load jQuery or Zepto to do it.
Let's live a lightweight client-side world using micro libraries as VanillaMasker is! Don't worry about where this will work, because this is a cross-browser and cross-device library. And if you find any bug, please let us know about it reporting an issue.
If you wanna see how this lib works, click to test this demo page.
How to install
Download script
- development version (6.2 Kbytes);
- minified version (3.24 Kbytes);
- gzipped version (1.3 Kbytes);
We have the following CDN available, for development or minified versions:
//unpkg.com/vanilla-masker@1.1.1/lib/vanilla-masker.js
//unpkg.com/vanilla-masker@1.1.1/build/vanilla-masker.min.js
We intent to automatically send new versions to the CDN, but keep in mind that the version you want might not be available there. Of course you can always download and put it in your own site.
NPM
For npm users you just run this command: npm install vanilla-masker --save
Bower
You can install it via bower too, using this command: bower install --save vanilla-masker
Meteor
And you can install inside your meteor projects with this command: meteor add bankfacil:vanilla-masker
How to use
Loading the lib
Like I said, you need to download and put this lib in your own site, using this tag below:
<html>
<head></head>
<body>
<input type="text">
<!-- Loading the vanilla-masker lib -->
<script src="vanilla-masker.min.js"></script>
</body>
</html>
Common uses
Money format
// Masking input element to money.
VMasker(document.querySelector("data-js-input")).maskMoney();
// Masking input element to money 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