The Power of Input Masks in Vue.js

What are Input Masks?

Input masks are used to constrain the data format that users can enter into an input field. They help make data more readable and inform users of what type of data is requested, reducing the chance of input errors. A common example is a phone number input field, which formats the raw value entered by the user into a standardized format.

Benefits of Input Masks

• Uniform data formatting
• Reduced input errors
• Improved user experience
• Enhanced data readability

Implementing Input Masks in Vue.js with Maska

Maska is a popular library for adding input masks to Vue.js applications. To get started, install Maska using npm or yarn:

npm install maska

Next, import Maska into your Vue.js component:

import { Maska } from 'maska';

Understanding Input Mask Syntax

Before creating input masks, it’s essential to understand the syntax used by Maska. Maska provides a set of default tokens that represent specific characters or character combinations. These tokens can be used to specify the characters that users are allowed to enter into an input field.

Creating a Phone Number Input Mask

To create a phone number input mask, update the v-mask directive to use the following syntax:

<input v-mask="'+1 (###) ##-##-##'" />

This will format the input value into a standardized phone number format.

Getting the Raw Unmasked Value

Maska provides an event called @maska that allows you to access the raw unmasked value. This is useful for tracking changes to the input value:

<input v-mask="'+1 (###) ##-##-##'" @maska="rawValue = $event.target.value" />

Creating a Name Input Field

To create a name input field, use the S token to accept only letters:

<input v-mask="S* S*" />

This will allow users to enter only two words, with each word consisting of only letters.

Creating a Date Input Mask

To create a date input mask, use a computed property to customize the date separator:

<input v-mask="dateMask" />

computed: {
  dateMask() {
    return this.useDot ? '##.##.####' : '##/##/####';
  }
}

Creating Custom Color Patterns

To create custom color patterns, use a computed property to define a HEX pattern:

<input v-mask="colorMask" />

computed: {
  colorMask() {
    return '#HHHHHH';
  }
}