{"id":21524887,"url":"https://github.com/degjs/simplemask","last_synced_at":"2025-03-17T18:17:53.109Z","repository":{"id":56466830,"uuid":"306121369","full_name":"DEGJS/simpleMask","owner":"DEGJS","description":"A less intrusive, reusable masking plugin. ","archived":false,"fork":false,"pushed_at":"2021-01-25T21:32:41.000Z","size":193,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-04-23T14:43:20.507Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DEGJS.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-10-21T19:02:49.000Z","updated_at":"2021-01-25T21:32:26.000Z","dependencies_parsed_at":"2022-08-15T19:20:22.386Z","dependency_job_id":null,"html_url":"https://github.com/DEGJS/simpleMask","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DEGJS%2FsimpleMask","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DEGJS%2FsimpleMask/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DEGJS%2FsimpleMask/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DEGJS%2FsimpleMask/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DEGJS","download_url":"https://codeload.github.com/DEGJS/simpleMask/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244085010,"owners_count":20395523,"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-11-24T01:30:21.856Z","updated_at":"2025-03-17T18:17:53.086Z","avatar_url":"https://github.com/DEGJS.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# simpleMask\n![Run Tests](https://github.com/DEGJS/simpleMask/workflows/Run%20Tests/badge.svg)\n\nsimpleMask is a masking plugin that leverages the focusout and focusin events to provide a more accessible, less intrusive masking experience.\n\n## Install\nsimpleMask is an ES6 module. Consequently, you may need a transpiler ([Babel](https://babeljs.io) is a nice one) to compile DomEvent into compatible Javascript for your runtime environment.\n\nIf you're using NPM, you can install DomEvent with the following command:\n\n```\n$ npm install @degjs/simple-mask\n```\n\n## Usage\n``` javascript\nimport simpleMask from '@degjs/simple-mask';\n\nconst container = document.querySelector('.container');\n\n    simpleMask(container, {\n        inputSelector: '.js-mask',\n        format: 'XXX-XX-XXXX',\n        numeric: true\n    })\n```\n\nWith the setup above, after a user has met the expected character length (automatically determined by the ```format``` parameter) and then triggers the focusout event, the input value will become ```XXX-XX-XXXX```, with ```X``` representing characters typed.\n\nFor example: If a user typed ```000000000``` it will become ```000-00-0000```.\n\nWhen a user focuses the input again, the value will then revert back to its previous state, in the case above: ```000000000```\n\n\nsimpleMask looks at the charcters in the ```format``` parameter to determine which characters to replace. By default,  ```X``` is used to represent expected user input.\n\nYou can set the parameter ```maskPlaceholder``` to whatever you'd like, to change it.\n\n## Parameters\n\n### inputSelector\nType: `string`\nThe selector for the input that will be masked.\n\nDefault: `null`\n\n### format\nType: `string`\nThis will determine how the input value should be masked.\n\nDefault: `null`\n\n### maskPlaceholder\nType: `string`\nThis will be used to determine what characters in the format `parameter` are expected to be user input.\n\nDefault: `X`\n\n### numeric\nType: `boolean`\nDetermines if users will be allowed to type numbers.\n\nDefault: `false`\n\n### alphanumeric\nType: `boolean`\nDetermines if users will be allowed to type numbers and letters\n\nDefault: `false`\n\n### alphanumericPattern\nType: `RegExp`\nDetermines the `RegExp` pattern for numbers and letters.\n\nDefault: `/^[a-zA-Z0-9\\.]*$/`\n\n### numericPattern\nType: `RegExp`\nDetermines the `RegExp` pattern for numbers.\n\nDefault: `[0-9\\/]+/`\n\n### customPattern\nType: `RegExp`\nAllows for a custom `RegExp` pattern to be used to restrict user input in any way that you may need.\n\nDefault: `[0-9\\/]+/`\n\n### onMaskCallback\nType: `Function`\nCallback that fires when an input has been masked.\n\nDefault: `null`\n\n### onFailedInputCallback\nType: `Function`\nCallback that fires when an a restricted key has been pressed\n\nDefault: `null`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdegjs%2Fsimplemask","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdegjs%2Fsimplemask","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdegjs%2Fsimplemask/lists"}