1.0.10 • Published 4 years ago

@thedoctor0/vue-input-mask v1.0.10

Weekly downloads
1
License
MIT
Repository
github
Last release
4 years ago

Vue Input Mask

npm Github file size npm Build Status codecov Codacy Badge License

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:

ValueFormat
#Number (0-9)
SLetter in any case (a-z, A-Z)
NNumber or letter (a-z, A-Z, 0-9)
XAny number, letter or symbol
aLetter that will be displayed in lower case (a-z)
ALetter that will be displayed in upper case (A-Z)
+Skip one or more characters
!Escape next character in mask
1.0.10

4 years ago

1.0.9

5 years ago

1.0.8

5 years ago

1.0.7

5 years ago

1.0.6

5 years ago

1.0.5

5 years ago

1.0.4

5 years ago

1.0.3

5 years ago

1.0.2

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago