Vue Masked Input

Simple masked input component for Vue.js 2.X. Based on inputmask-core-edited.

Live Demo

Install

npm

npm install vue-masked-input-clonix --save

Usage

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

<masked-input v-model="date" mask="11/11/1111" placeholder="dd/mm/yyyy" />

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
• ? - Make the character before optional

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:

<masked-input v-model="phone" mask="\+\1 (111) 111-1111" placeholder="Phone number" type="tel" />

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:

<masked-input mask="\+\1 (111) 1111-11" placeholder="Phone" @input="rawVal = arguments[1]" />

Placeholder character

Placeholder character is customizable by placeholder-char attribute:

<masked-input v-model="phone" mask="\+\1 (111) 111-1111" placeholder-char="-" placeholder="Phone number" type="tel" />

Example patterns

Credit card number: 1111 1111 1111 1111 Date: 11/11/1111 ISO date: 1111-11-11 Time: 11:11 Canadian postal code: A1A 1A1 Norn Iron license plate: AAA 1111

Custom mask object

You can use your own mask options object, it will be passed to the inputmask-core constructor:

<masked-input
  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