Vue Masked Input

Dead simple masked input component for Vue.js 2.X. Based on inputmask-core.

$3

Install

$3

``
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):
* 1 - number
* a - letter
* A - letter, forced to upper case when entered
- alphanumeric
* # - alphanumeric, forced to upper case when entered
* + - any character

$3


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

`

$3

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

`

$3

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

`

$3

You can use your own mask options object, it will be passed to the inputmask-core constructor:
`vue
v-model="custom"
placeholder="Custom"
:mask="{
pattern: 'VVVV',
formatCharacters: {
'V': {
validate: char => /[a-jA-J]/.test(char),
transform: char => char.toUpperCase(),
},
},
}"
/>
``

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