{"id":13701488,"url":"https://github.com/niksmr/vue-masked-input","last_synced_at":"2025-05-04T21:30:58.585Z","repository":{"id":37484059,"uuid":"79848209","full_name":"niksmr/vue-masked-input","owner":"niksmr","description":"Masked input component for Vue.js","archived":false,"fork":false,"pushed_at":"2024-04-10T08:10:04.000Z","size":1490,"stargazers_count":452,"open_issues_count":44,"forks_count":91,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-04-05T08:20:29.192Z","etag":null,"topics":["inputmask","ui-components","vue"],"latest_commit_sha":null,"homepage":"https://niksmr.github.io/vue-masked-input/","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/niksmr.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-01-23T21:07:45.000Z","updated_at":"2025-01-18T12:22:44.000Z","dependencies_parsed_at":"2024-06-18T13:36:58.168Z","dependency_job_id":"a88e49c1-0325-492b-87fa-6f22be82fd73","html_url":"https://github.com/niksmr/vue-masked-input","commit_stats":{"total_commits":43,"total_committers":3,"mean_commits":"14.333333333333334","dds":"0.046511627906976716","last_synced_commit":"3d9d8b50900ce735e3919d00b4ab21705cd122cb"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/niksmr%2Fvue-masked-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/niksmr%2Fvue-masked-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/niksmr%2Fvue-masked-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/niksmr%2Fvue-masked-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/niksmr","download_url":"https://codeload.github.com/niksmr/vue-masked-input/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252403824,"owners_count":21742450,"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":["inputmask","ui-components","vue"],"created_at":"2024-08-02T20:01:42.402Z","updated_at":"2025-05-04T21:30:57.969Z","avatar_url":"https://github.com/niksmr.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","UI Components [🔝](#readme)","UI组件","Components \u0026 Libraries","UI Components"],"sub_categories":["形成","UI Components","Form"],"readme":"# Vue Masked Input\nDead simple masked input component for Vue.js 2.X. Based on [inputmask-core](https://github.com/insin/inputmask-core).\n\n### [Live Demo](https://niksmr.github.io/vue-masked-input/)\n\n## Install\n### npm\n```\nnpm install vue-masked-input --save\n```\n\n## Usage\nUse it with `v-model` just like a native html input with the `mask` attribute:\n```vue\n\u003cmasked-input v-model=\"date\" mask=\"11/11/1111\" placeholder=\"dd/mm/yyyy\" /\u003e\n```\n\nThe following format characters define editable parts of the mask (see [inputmask-core](https://github.com/insin/inputmask-core)):\n* `1` - number\n* `a` - letter\n* `A` - letter, forced to upper case when entered\n* `*` - alphanumeric\n* `#` - alphanumeric, forced to upper case when entered\n* `+` - any character\n\n### Static characters\nIf you need to include one of these characters as a static part of the mask, you can escape them with a preceding backslash:\n```vue\n\u003cmasked-input v-model=\"phone\" mask=\"\\+\\1 (111) 111-1111\" placeholder=\"Phone number\" type=\"tel\" /\u003e\n```\n\n### Raw input\nYou can also get a raw user input text if you want. Instead of using v-model you might need second argument of the input event:\n```vue\n\u003cmasked-input mask=\"\\+\\1 (111) 1111-11\" placeholder=\"Phone\" @input=\"rawVal = arguments[1]\" /\u003e\n```\n\n### Placeholder character\nPlaceholder character is customizable by `placeholder-char` attribute:\n```vue\n\u003cmasked-input v-model=\"phone\" mask=\"\\+\\1 (111) 111-1111\" placeholder-char=\"-\" placeholder=\"Phone number\" type=\"tel\" /\u003e\n```\n\n### Custom mask object\nYou can use your own mask options object, it will be passed to the [inputmask-core](https://github.com/insin/inputmask-core#inputmask-options) constructor:\n```vue\n\u003cmasked-input\n  v-model=\"custom\"\n  placeholder=\"Custom\"\n  :mask=\"{\n    pattern: 'VVVV',\n    formatCharacters: {\n      'V': {\n        validate: char =\u003e /[a-jA-J]/.test(char),\n        transform: char =\u003e char.toUpperCase(),\n      },\n    },\n  }\"\n/\u003e\n```\n\n## Known issues/TODO\n* Cut in mobile Chrome\n* Cyrillic chars are not supported in mobile Chrome\n* Backspace problems in mobile Chrome\n\nFound more? It's open for feedback and pull requests\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fniksmr%2Fvue-masked-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fniksmr%2Fvue-masked-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fniksmr%2Fvue-masked-input/lists"}