@thedoctor0/vue-input-mask

Vue Input Mask

Input mask directive for Vue.js - lightweight, dependency free, written in TypeScript.

Install

NPM

npm i -S @thedoctor0/vue-input-mask

Yarn

yarn add @thedoctor0/vue-input-mask

Initialization

Global

import VueInputMask from '@thedoctor0/vue-input-mask';

Vue.directive(VueInputMask);

Local

import { mask } from '@thedoctor0/vue-input-mask';

export default {
  directives: { mask }
}

Usage

<input id="masked-input" type="text" v-mask="'###-###-####'" v-model="inputModelVariable">
<!-- OR -->
<input id="masked-input" type="text" v-mask="nameOfVariableWithMask" v-model="inputModelVariable">

Raw value

There are two ways to get the raw input value: from attribute, using demask helper.

Attribute

The directive adds input raw value parameter directly onto the element, so its easy to get it:

const rawValue = document.getElementById('masked-input').getAttribute('raw-value');

Demask

It is also possible to use helper function to get raw value from masked input value:

import { demask } from '@thedoctor0/vue-input-mask';

const rawValue = demask(this.inputModelVariable, '###-###-####');

Tokens

List of supported tokens available for use in mask: