Noble Programming Mantra

    vue-masked-input

    0.5.2 • Public • Published

    Vue Masked Input

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

    Live Demo

    Install

    npm

    npm install vue-masked-input --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

    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" />

    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

    Install

    npm i vue-masked-input

    DownloadsWeekly Downloads

    5,785

    Version

    0.5.2

    License

    MIT

    Last publish

    Collaborators

    • niksmr