Input Interface is a lightweight, dependency-free input masking library created specifically for Vue.

input mask html5, vanilla text mask, masking and unmasking in javascript, bootstrap input mask, input masking javascript, javascript masking library

Default Mask Tokens

• S = alpha characters
• # = numerical characters
• X = alpha numerical characters
• A = alpha characters, transformed to uppercase
• a = alpha characters, transformed to lowercase
• \ = escape any of the above characters

How to make use of it:

Install and download:

# Yarn
$ yarn add vue-input-facade

# NPM
$ npm install vue-input-facade --save

1. Import and register the component.

import InputFacade from 'vue-input-facade'
Vue.use(InputFacade)

// or
import { InputFacade, facade, filter } from 'vue-input-facade'
export default {
  components: { InputFacade },
  directives: { facade },
  filters: { facade: filter },
}

2. Insert the input mask component into the template and define your rules with the following tokens.

<input-facade mask="(###) ###-####" name="phoneNumber" type="tel" />

3. Or use it as a directive.

<input type="text" type="tel" v-facade="'(###) ###-####'" />

Tiny Input Mask Library For Vue.js, Vue Input Facade Plugin/Github, phone number masking javascript

See Demo And Download

Official Website(RonaldJerez): Click Here

This superior jQuery/javascript plugin is developed by RonaldJerez. For extra Advanced usage, please go to the official website.