{"id":13760382,"url":"https://github.com/BankFacil/vanilla-masker","last_synced_at":"2025-05-10T10:32:34.931Z","repository":{"id":41116430,"uuid":"278636165","full_name":"bankfacil/vanilla-masker","owner":"bankfacil","description":null,"archived":false,"fork":false,"pushed_at":"2020-07-10T13:14:12.000Z","size":115,"stargazers_count":9,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-05-07T20:48:44.955Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bankfacil.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-07-10T13:08:11.000Z","updated_at":"2023-09-27T19:57:37.000Z","dependencies_parsed_at":"2022-09-09T21:30:28.691Z","dependency_job_id":null,"html_url":"https://github.com/bankfacil/vanilla-masker","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bankfacil%2Fvanilla-masker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bankfacil%2Fvanilla-masker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bankfacil%2Fvanilla-masker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bankfacil%2Fvanilla-masker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bankfacil","download_url":"https://codeload.github.com/bankfacil/vanilla-masker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224949790,"owners_count":17397236,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T13:01:09.100Z","updated_at":"2024-11-16T17:31:02.593Z","avatar_url":"https://github.com/bankfacil.png","language":"JavaScript","funding_links":[],"categories":["Form Widgets","Form Widgets [🔝](#readme)","UI","表单组件"],"sub_categories":["Input","输入"],"readme":"# What's this\n\n[![Build Status](https://travis-ci.org/vanilla-masker/vanilla-masker.svg)](https://travis-ci.org/vanilla-masker/vanilla-masker)\n\nIt's a pure JavaScript mask input.\nNow you can use a simple and pure javascript lib to mask your input elements, without need to load jQuery or Zepto to do it.\n\nLet's live a lightweight client-side world using micro libraries as VanillaMasker is!\nDon'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](https://github.com/vanilla-masker/vanilla-masker/issues).\n\nIf you wanna see how this lib works, click to test this [demo page](https://vanilla-masker.github.io/vanilla-masker/demo.html).\n\n# How to install\n\n### Download script\n* [development version](https://raw.githubusercontent.com/vanilla-masker/vanilla-masker/1.1.0/lib/vanilla-masker.js) (6.2 Kbytes);\n* [minified version](https://raw.githubusercontent.com/vanilla-masker/vanilla-masker/1.1.0/build/vanilla-masker.min.js) (3.24 Kbytes);\n* [gzipped version](https://raw.githubusercontent.com/vanilla-masker/vanilla-masker/1.1.0/build/vanilla-masker.min.gz.js) (1.3 Kbytes);\n\nWe have the following CDN available, for development or minified versions:\n\n`//unpkg.com/vanilla-masker@1.1.1/lib/vanilla-masker.js`\n`//unpkg.com/vanilla-masker@1.1.1/build/vanilla-masker.min.js`\n\nWe 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.\n\n### NPM\nFor npm users you just run this command: `npm install vanilla-masker --save`\n\n### Bower\nYou can install it via bower too, using this command: `bower install --save vanilla-masker`\n\n### Meteor\nAnd you can install inside your meteor projects with this command: `meteor add bankfacil:vanilla-masker`\n\n# How to use\n\n### Loading the lib\n\nLike I said, you need to download and put this lib in your own site, using this tag below:\n\n``` html\n\u003chtml\u003e\n   \u003chead\u003e\u003c/head\u003e\n   \u003cbody\u003e\n      \u003cinput type=\"text\"\u003e\n      \u003c!-- Loading the vanilla-masker lib --\u003e\n      \u003cscript src=\"vanilla-masker.min.js\"\u003e\u003c/script\u003e\n   \u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Common uses\n\n#### Money format\n\n``` javascript\n\n// Masking input element to money.\nVMasker(document.querySelector(\"data-js-input\")).maskMoney();\n\n// Masking input element to money with options.\nVMasker(document.querySelector(\"data-js-input\")).maskMoney({\n  // Decimal precision -\u003e \"90\"\n  precision: 2,\n  // Decimal separator -\u003e \",90\"\n  separator: ',',\n  // Number delimiter -\u003e \"12.345.678\"\n  delimiter: '.',\n  // Money unit -\u003e \"R$ 12.345.678,90\"\n  unit: 'R$',\n  // Money unit -\u003e \"12.345.678,90 R$\"\n  suffixUnit: 'R$',\n  // Force type only number instead decimal,\n  // masking decimals with \",00\"\n  // Zero cents -\u003e \"R$ 1.234.567.890,00\"\n  zeroCents: true\n});\n\n// Masking an array of input elements to money.\nVMasker(document.querySelectorAll(\"data-js-input\")).maskMoney();\n\n// Converts number to money string\nVMasker.toMoney(1234); // -\u003e R$ 1.234,00\n```\n\n#### Only numbers\n\n``` javascript\n// Masking input element to number.\nVMasker(document.querySelector(\"data-js-input\")).maskNumber();\n\n// Converts any string to number\nVMasker.toNumber(\"123ac34\"); // -\u003e 12334\nVMasker.toNumber(\"-123ac34\"); // -\u003e -12334\n```\n\n#### Custom pattern\n\n``` javascript\n// Listen the input element masking it to format with pattern.\nVMasker(document.querySelector(\"input\")).maskPattern(\"(99) 9999-9999\");\n\n// Converts value to masked phone\nVMasker.toPattern(1099911111, \"(99) 9999-9999\"); // -\u003e (10) 9991-1111\n// Converts value to masked date\nVMasker.toPattern(12122000, \"99/99/9999\"); // -\u003e 12/12/2000\n// Converts value to masked document\nVMasker.toPattern(99911111101, \"999.999.999-99\"); // -\u003e 999.111.111-01\n// Converts value to masked car plate\nVMasker.toPattern('ABC1234', \"AAA-9999\"); // -\u003e ABC-1234\n// Converts value to masked vehicle identification\nVMasker.toPattern('9BGRD08X04G117974', \"SS.SS.SSSSS.S.S.SSSSSS\"); // -\u003e 9B.GR.D08X0.4.G.117974\n\n// Pass in an optional placeholder option to represent remaining characters to be entered\nVMasker.toPattern('4', {pattern: \"(999) 999-9999\", placeholder: \"x\"}); // -\u003e (4xx) xxx-xxxx\n```\n\n#### Undoing a mask\n\n``` javascript\nvar el = document.querySelector(\"input\")\nVMasker(el).maskPattern(\"(99) 9999-9999\"); // masking the input\nVMasker(el).unMask(); // unmask!\n```\n\n#### Dynamic mask\n\nSometimes you need swap the mask according with value.\nYou can see the sample below on [codepen.io](http://codepen.io/lagden/pen/meemqG)\n\n```javascript\nfunction inputHandler(masks, max, event) {\n  var c = event.target;\n  var v = c.value.replace(/\\D/g, '');\n  var m = c.value.length \u003e max ? 1 : 0;\n  VMasker(c).unMask();\n  VMasker(c).maskPattern(masks[m]);\n  c.value = VMasker.toPattern(v, masks[m]);\n}\n\nvar telMask = ['(99) 9999-99999', '(99) 99999-9999'];\nvar tel = document.querySelector('#tel');\nVMasker(tel).maskPattern(telMask[0]);\ntel.addEventListener('input', inputHandler.bind(undefined, telMask, 14), false);\n\nvar docMask = ['999.999.999-999', '99.999.999/9999-99'];\nvar doc = document.querySelector('#doc');\nVMasker(doc).maskPattern(docMask[0]);\ndoc.addEventListener('input', inputHandler.bind(undefined, docMask, 14), false);\n```\n\n### Meteor uses\n\nIf your app is built on top of Meteor framework, you can use the lib in this way...\n\n``` html\n\u003cbody\u003e\n  \u003ch1\u003eWelcome to Meteor!\u003c/h1\u003e\n  {{\u003e myTemplate}}\n\u003c/body\u003e\n\n\u003ctemplate name=\"myTemplate\"\u003e\n  \u003cinput type=\"text\" placeholder=\"Money\" data-vm-mask-money\u003e\n  \u003cinput type=\"text\" placeholder=\"Number\" data-vm-mask-number\u003e\n  \u003cinput type=\"text\" placeholder=\"Date\" data-vm-mask-date\u003e\n\u003c/template\u003e\n\n```\n\nYou just need to bind the elements into the template `rendered` function...\n\n``` javascript\nif (Meteor.isClient) {\n  Template.myTemplate.rendered = function() {\n    VMasker(this.find(\"[data-vm-mask-money]\")).maskMoney();\n    VMasker(this.find(\"[data-vm-mask-number]\")).maskNumber();\n    VMasker(this.find(\"[data-vm-mask-date]\")).maskPattern(\"99/99/9999\");\n  };\n}\n```\n\n# How to run localhost\n\n* Install node.js - http://nodejs.org/download\n* Clone this repository - `git clone git@github.com:vanilla-masker/vanilla-masker.git`\n* Install Grunt - `npm install -g grunt-cli`\n* Install Grunt dependencies - `cd vanilla-masker \u0026\u0026 npm install`\n* Running development mode - `grunt dev`\n* Open the browser - http://localhost:4500\n\n# Run test\n\n* Run the command: `grunt test`\n\n# Build project\n\n* Run the command: `grunt build`\n\n# TODO - we need pull requests :]\n\n* Test Opera mini browser;\n* Beautify Demo Page;\n* Bind mask using `data-vm` attributes;\n\n# Compatibility\n\nDesktop browsers:\n\n* Chrome 4.0+\n* Firefox 2.0+\n* Safari 4.0+\n* Opera 10.0+\n* Internet Explorer 8+\n\nMobile browsers:\n\n* Android browser 2.2+\n* Chrome mobile 35.0+\n* Firefox mobile 29.0+\n* Opera mobile 10.0+\n* iOS Safari 3.2+\n* Windows Phone browsers\n\n# Contributors\n\nCaio Ribeiro Pereira - caio.ribeiro.pereira@gmail.com\nLeandro Alvares da Costa - leandroadacosta@gmail.com\nBobby - squidz.bee@gmail.com\nHenrique Antonini Silvério - contato@henriquesilverio.com\nJoilson Marques - joilsonmarques@gmail.com\nLeonardo Andrade - leonardopandrade@gmail.com\nThiago Lagden - lagden@gmail.com\n\n# License\n\nMIT License: http://vanilla-masker.mit-license.org\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBankFacil%2Fvanilla-masker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FBankFacil%2Fvanilla-masker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBankFacil%2Fvanilla-masker/lists"}