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 charactersX
= alpha numerical charactersA
= alpha characters, transformed to uppercasea
= alpha characters, transformed to lowercase\
= escape any of the above characters
<input-facade mask="(###) ###-####" name="phoneNumber" type="tel" />
3. Or use it as a directive.
<input type="text" type="tel" v-facade="'(###) ###-####'" />
Preview:
Changelog:
v2.1.0 (05/21/2022)
- component: emit keypress events from component to support keyboard navigation overrides
v2.0.1 (04/04/2022)
- 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
Download Details:
Author: RonaldJerez
Live Demo: https://ronaldjerez.github.io/vue-input-facade/
Download Link: https://github.com/RonaldJerez/vue-input-facade/archive/master.zip
Official Website: https://github.com/RonaldJerez/vue-input-facade
Install & Download:
# Yarn
$ yarn add vue-input-facade
# NPM
$ npm install vue-input-facade --save