vuetify-masked

Create a masked text field for vuetify 2.x based on v-text-field. Supported are static masks provided by string/object and the masking of float and integer values. Additionally, a filter exists to format a value.

Demo

CodeSandbox Demo

Install

npm install vuetify-masked --save

Global

import Vue from 'vue'
import VuetifyMasked from 'vuetify-masked'

Vue.use(VuetifyMasked)

Local

// use only the component
import { VuetifyMaskedComponent } from 'vuetify-masked'

// use only the filter
import { VuetifyMaskedFilter } from 'vuetify-masked'

export default {
  components: {
    'v-text-field-masked': VuetifyMaskedComponent
  },
  filters: {
    VuetifyMaskedFilter
  }
}

Usage

Once installed, for a simple mask the component can be used in a template as simple as:

Type 'text'

<!-- Component -->
<v-text-field-masked
  v-model="text"
  formatMask="###A/##l/D#U"
  label="default type (text)"
  :showHints="true"
></v-text-field-masked>

<!-- Filter -->
{{ text | vuetifyMaskedFilter({ formatMask: "###A/##l/D#U" }) }}

Resulted value for '123A56U89a' is '123A/56u/89A'. In the text field default hints will be shown.

Type 'float'

<v-text-field-masked
  v-model="text"
  label="float type"
  type="float"
></v-text-field-masked>

<!-- Filter -->
{{ text | vuetifyMaskedFilter({ type:"float" }) }}

Resulted value for '1234567890' is '1,234,567,890.00'

Type 'integer'

<v-text-field-masked
  v-model="text"
  label="integer type"
  type="integer"
></v-text-field-masked>

<!-- Filter -->
{{ text | vuetifyMaskedFilter({ type:"integer" }) }}

Resulted value for '1234567890' is '1,234,567,890'

Type 'currency'

<v-text-field-masked
  v-model="text"
  label="currency type"
  type="currency"
></v-text-field-masked>

<!-- Filter -->
{{ text | vuetifyMaskedFilter({ type:"currency" }) }}

Resulted value for '1234567890' is '1,234,567,890.00USD'

Type 'percentage'

<v-text-field-masked
  v-model="text"
  label="percentage type"
  type="percentage"
></v-text-field-masked>

<!-- Filter -->
{{ text | vuetifyMaskedFilter({ type:"percentage" }) }}

Resulted value for '1234567890' is '1,234,567,890.00%'

Options (Component Props and Filter Parameters)

The following options can be used for component and filter |Option |Type |Default |Component |Filter |Description | |:-------------|:--- |:-----------------|:----------|:------|:-----------| |deformatMask |string, object |null |yes |no |Mask used to deformat the masked value. If null all characters of the masked will be removed | |empty |string |null |yes |yes |Value returned for an empty text field when using the component. For the filter the provided string will be displayed if value is empty or null| |falseCharWildcard|string |'' |yes |yes |False characters of the provided v-model/value will be replaced with this one. By default they will simply be deleted.| |formatMask |string, object |'##########' |yes |yes |Used to mask the given value. Meaning of characters and usable attributes for object can be found below table| |hints |object ||yes|no| Hints will be displayed depending on the cursor position and according to the next possible character that can be entered. | |length |number |null |yes |no |Max number of digits (including precision) that can be entered into the text field. Ignored for type text.| |locale |string |'en-EN' |yes |yes |Used to determine the decimal and thousands seperator. | |maskCharacter |array |['-', '+', '.', ',', ' ', '/', '(', ')', '_', '\\', '\'', '~', '*', '&', '"', '?']|yes|yes|Characters of the mask. Can not be used as input character for the text field. Used for both, formatMask and deformatMask.| |precision |number |2 |yes |yes |Precision used for numbers. Ingored for types text and integer.| |properties |object |null |yes |no |Properties for the v-text-field used by vuetify-masked| |showHints |boolean |false |yes |no |If true, show hints defined by hints |suffix |string |null (text, integer, float)'%' (percentage)'USD'(currency)|yes|yes|| |type |string |'text' |yes |yes |5 types exist: text, float, integer, currency, and percentage | |value |string, number |null |yes |yes |Mapped to the v-model of the component| | |v-model |string, number |null |yes |no | |

Predefined Mask Characters

|Character|Description| |---------|-----------| |A|Character is alphabetical| |D|Character is a digit| |l|Character will be transformed to lower cased| |U|Character will be transformed to upper cased| |#|Any character is valid|

Any other alphabetical character of the mask will be handled as #.

Object Attributes for Mask

In case of an object, the following attributes can be set. |Attribute|Type|Description| |---------|----|-----------| |mask|string|Character of the mask.| |toUpperCase|boolean|If true the character will be transformed to upper case. If not explicity set it will be true if mask is 'U'.| |toLowerCase|boolean|If true the character will be transformed to upper case. If not explicity set it will be true if mask is 'l'.| |onlyDigit|boolean|If true the character will be transformed to upper case. If not explicity set it will be true if mask is 'D'.| |onlyAlphabetical|boolean|If true the character will be transformed to upper case. If not explicity set it will be true if mask is 'A'.| |hint|string|Hint only used for this character of the mask.|

Hints Object Attributes and Default Values

|Attribute |Type |Default|Description| |------------|------|-------|-----------| |alphabetic |string|'The next char is alphabetic'|By default used for 'A'| |alphanumeric|string|'The next char is alphanumeric'|By default used for '#' |digit |string|'The next char is a digit'|By default used for 'D'| |lowerCase |string|'The next char is lower case'|By default used for 'l'| |maxLength |string|'Max number of characters reached'|| |numeric |string|null|Only used for types float, integer, currency, and percentage| |upperCase |string|'The next char is upper case'|By default used for 'U'|