@thedoctor0/vue-input-mask
v1.0.10
Published
Input mask directive for Vue.js - lightweight, dependency free, written in TypeScript.
Downloads
129
Maintainers
Readme
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:
| Value | Format | |-------|----------------------------------------------------| | # | Number (0-9) | | S | Letter in any case (a-z, A-Z) | | N | Number or letter (a-z, A-Z, 0-9) | | X | Any number, letter or symbol | | a | Letter that will be displayed in lower case (a-z) | | A | Letter that will be displayed in upper case (A-Z) | | + | Skip one or more characters | | ! | Escape next character in mask |