https://github.com/niksmr/vue-masked-input

Masked input component for Vue.js
https://github.com/niksmr/vue-masked-input

inputmask ui-components vue

Last synced: about 2 months ago
JSON representation

Masked input component for Vue.js

• Host: GitHub
• URL: https://github.com/niksmr/vue-masked-input
• Owner: niksmr
• License: mit
• Created: 2017-01-23T21:07:45.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2024-04-10T08:10:04.000Z (5 months ago)
• Last Synced: 2024-07-18T17:44:05.197Z (2 months ago)
• Topics: inputmask, ui-components, vue
• Language: JavaScript
• Homepage: https://niksmr.github.io/vue-masked-input/
• Size: 1.42 MB
• Stars: 455
• Watchers: 11
• Forks: 92
• Open Issues: 44
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Vue Masked Input

Dead simple masked input component for Vue.js 2.X. Based on [inputmask-core](https://github.com/insin/inputmask-core).

### [Live Demo](https://niksmr.github.io/vue-masked-input/)

## Install

### npm

```

npm install vue-masked-input --save

```

## Usage

Use it with `v-model` just like a native html input with the `mask` attribute:

```vue

```

The following format characters define editable parts of the mask (see [inputmask-core](https://github.com/insin/inputmask-core)):

* `1` - number

* `a` - letter

* `A` - letter, forced to upper case when entered

* `*` - alphanumeric

* `#` - alphanumeric, forced to upper case when entered

* `+` - any character

### Static characters

If you need to include one of these characters as a static part of the mask, you can escape them with a preceding backslash:

```vue

```

### Raw input

You 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:

```vue

```

### Placeholder character

Placeholder character is customizable by `placeholder-char` attribute:

```vue

```

### Custom mask object

You can use your own mask options object, it will be passed to the [inputmask-core](https://github.com/insin/inputmask-core#inputmask-options) constructor:

```vue

```

## Known issues/TODO

* Cut in mobile Chrome

* Cyrillic chars are not supported in mobile Chrome

* Backspace problems in mobile Chrome

Found more? It's open for feedback and pull requests