npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

seatgeek-vanilla-masker

v0.2.0

Published

VanillaMasker is a pure javascript input mask.

Downloads

5,913

Readme

What's this

Build Status Code Climate

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

Please, this lib don't have CDN yet, so you need to 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$', 
  // 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("data-js-input")).maskMoney();

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

Only numbers

// Masking input element to number.
VMasker(document.querySelector("data-js-input")).maskNumber();

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

Custom pattern

// Listen the input element masking it to format with pattern.
VMasker(document.querySelector("input")).maskPattern("(99) 9999-9999");

// Converts value to masked phone
VMasker.toPattern(1099911111, "(99) 9999-9999"); // -> (10) 9991-1111
// Converts value to masked date
VMasker.toPattern(12122000, "99/99/9999"); // -> 12/12/2000
// Converts value to masked document
VMasker.toPattern(99911111101, "999.999.999-99"); // -> 999.111.111-01
// Converts value to masked car plate
VMasker.toPattern('ABC1234', "AAA-9999"); // -> ABC-1234
// Converts value to masked vehicle identification
VMasker.toPattern('9BGRD08X04G117974', "SS.SS.SSSSS.S.S.SSSSSS"); // -> 9B.GR.D08X0.4.G.117974

// Pass in an optional placeholder option to represent remaining characters to be entered
VMasker.toPattern('4', {pattern: "(999) 999-9999", placeholder: "x"}); // -> (4xx) xxx-xxxx

Undoing a mask

var el = document.querySelector("input")
VMasker(el).maskPattern("(99) 9999-9999"); // masking the input
VMasker(el).unMask(); // unmask!

Meteor uses

If your app is built on top of Meteor framework, you can use the lib in this way...

<body>
  <h1>Welcome to Meteor!</h1>
  {{> myTemplate}}
</body>

<template name="myTemplate">
  <input type="text" placeholder="Money" data-vm-mask-money>
  <input type="text" placeholder="Number" data-vm-mask-number>
  <input type="text" placeholder="Date" data-vm-mask-date>
</template>

You just need to bind the elements into the template rendered function...

if (Meteor.isClient) {
  Template.myTemplate.rendered = function() {
    VMasker(this.find("[data-vm-mask-money]")).maskMoney();
    VMasker(this.find("[data-vm-mask-number]")).maskNumber();
    VMasker(this.find("[data-vm-mask-date]")).maskPattern("99/99/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 :]

  • Test Opera mini browser;
  • Beautify Demo Page;
  • Bind mask using data-vm attributes;

Compatibility

Desktop browsers:

  • Chrome 4.0+
  • Firefox 2.0+
  • Safari 4.0+
  • Opera 10.0+
  • Internet Explorer 8+

Mobile browsers:

  • Android browser 2.2+
  • Chrome mobile 35.0+
  • Firefox mobile 29.0+
  • Opera mobile 10.0+
  • iOS Safari 3.2+
  • Windows Phone browsers

Contributors

Caio Ribeiro Pereira - [email protected]
Leandro Alvares da Costa - [email protected]
Bobby - [email protected] Henrique Antonini Silvério - [email protected]
Joilson Marques - [email protected]
Leonardo Andrade - [email protected]

Changelog

1.0.9 - 07/04/2015

1.0.8 - 27/01/2015

1.0.7 - 26/01/2015

1.0.6 - 19/12/2014

1.0.5 - 06/12/2014

1.0.4 - 02/12/2014

  • Added unbindElementToMask() function.
  • Added unMask() function.

1.0.3 - 29/10/2014

  • Added pattern "S" to support alphanumerics.

1.0.2 - 25/09/2014

  • Added Meteor Package support.

1.0.1 - 19/09/2014

  • Fix VMasker factory when element is empty array.

1.0.0 - 14/09/2014

  • Added VMasker factory as default.
  • Fix Windows Phone compatibility.

0.3.3

  • Fix ignore setSelectionRange cursor for IE8.
  • Fix ZeroCents behavior for maskMoney.
  • Fix last output state for single element.
  • Fix Bower main file.

0.3.2

  • Added suffixUnit support for maskMoney.

0.3.1

  • Fix mask when input has values.
  • Fix cursor navigation.
  • Fix delete char at specific position.

0.3.0

  • Accepting elements from mask function
  • Changed maskPhone, maskCPF, maskCNPJ and maskDate to maskPattern function
  • Added toPattern function
  • Fixed maskPattern when types pattern "A" in a mask which has only pattern "9"
  • Internet Explorer 8 support
  • Added AMD support (only client-side)
  • maskNumber function accepts negative numbers

0.2.0

  • Added zeroCents to maskMoney function
  • Added maskPhone, maskCPF, maskCNPJ and maskDate function
  • Added bindElementToMask function

0.1.0

  • Added maskMoney
  • Added Bower support
  • Added Demo page
  • Added JSHint
  • Mobile browser support
  • Added Grunt build
  • Added Travis-CI
  • Added CodeClimate

License

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

Powered by

Bankfacil: http://www.bankfacil.com.br
Join our team! Read about our development culture and check our open positions