https://github.com/xdimedrolx/vue-input-mask
Yet another Vue component for input masking
https://github.com/xdimedrolx/vue-input-mask
mask maskedinput vue
Last synced: 4 months ago
JSON representation
Yet another Vue component for input masking
- Host: GitHub
- URL: https://github.com/xdimedrolx/vue-input-mask
- Owner: xdimedrolx
- License: mit
- Created: 2017-11-21T10:22:58.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T20:31:18.000Z (over 3 years ago)
- Last Synced: 2025-09-28T06:29:42.120Z (8 months ago)
- Topics: mask, maskedinput, vue
- Language: Vue
- Size: 950 KB
- Stars: 17
- Watchers: 2
- Forks: 6
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-input-mask
Yet another Vue component for input masking. Based on [react-input-mask](https://github.com/sanniassin/react-input-mask).
#### [Demo](http://sanniassin.github.io/react-input-mask/demo.html)
## Install
```
yarn add vue-input-mask
or
npm i -S vue-input-mask
```
## Properties
### `mask` : `string`
Mask string. Default format characters are:
`9`: `0-9`
`a`: `A-Z, a-z`
`*`: `A-Z, a-z, 0-9`
Any character can be escaped with a backslash. It will appear as a double backslash in JS strings. For example, a German phone mask with unremoveable prefix +49 will look like mask="+4\\9 99 999 99" or mask={'+4\\\\9 99 999 99'}
### `maskChar` : `string`
Character to cover unfilled parts of the mask. Default character is "\_". If set to null or empty string, unfilled parts will be empty as in ordinary input.
### `formatChars` : `object`
Defines format characters with characters as a keys and corresponding RegExp strings as a values. Default ones:
```js
{
'9': '[0-9]',
'a': '[A-Za-z]',
'*': '[A-Za-z0-9]'
}
```
### `alwaysShowMask` : `boolean`
Show mask when input is empty and has no focus.
## Example
```js
import Vue from 'vue';
import InputMask from 'vue-input-mask';
Vue.component('input-mask', InputMask)
```
In template:
```html
```
## Todo
- [ ] Refactoring
- [ ] Tests
- [ ] Implementation of `componentWillReceiveProps`
## Thanks
Thanks @sanniassin for the awesome component