Tiny Input Mask Library For Vue.js – Input Facade

Install & Download:

# Yarn
$ yarn add vue-input-facade
# NPM
$ npm install vue-input-facade --save

Description:

Input Facade is a lightweight input mask component/directive to mask your input fields using custom rules.

How to use it:

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 own rules using the following 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
• ? = mark the preceding character as optional [0 or 1]
• * = mark the preceding character as optional & repeating [0 or more]
• | = used for alternative static characters: A|B|C will accept A or B or C

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

3. Or use it as a directive.

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

Preview:

Changelog:

v2.2.0 (01/03/2024)

• Add event paste

v2.1.3 (08/18/2023)

• Bugfix

v2.1.2 (08/01/2023)

• update to previous fix for native handling of composition events when no mask passed

v2.1.1 (06/13/2023)

• bugfixes

v2.1.0 (05/21/2023)

• component: emit keypress events from component to support keyboard navigation overrides

v2.0.1 (04/04/2023)

• remove unecessary dependencies

v2.0.0 (02/14/2022)

• alternations: add support for alternations / pipe
• add support for repeating characters
• core.js: allow for turning on and off the masking
• add support optional characters
• bugfixes

v1.4.1 (02/03/2022)

• bugfix

v1.3.9 (02/03/2022)

• handle composition events for better international keyboard support

v1.3.8 (12/14/2021)

• Bug Fixes

v1.3.7 (10/06/2021)

• directive.js: fix handling events for multiple elements

v1.3.6 (06/19/2021)

• Bugfix

v1.3.4 (05/09/2021)

• Fixed: assume insertText if event.inputType is unsupported

v1.3.3 (04/28/2020)

• fixed firefox issue where masked value can overflow

v1.3.2 (07/30/2020)

• avoid emitting input event if initial value is null

v1.3.1 (06/18/2020)

• Fixed mask on 2nd input event from vuetify in firefox