maska

What is maska?

Maska is a lightweight JavaScript library for input masking. It allows you to format user input in real-time, ensuring that the data entered matches a specified pattern. This is particularly useful for forms that require specific formats, such as phone numbers, dates, and credit card numbers.

What are maska's main functionalities?

Basic Masking

This feature allows you to apply a basic mask to an input field. In this example, the input field with the id 'phone' will be formatted as a US phone number.

const input = document.querySelector('#phone');
Maska.create(input, { mask: '(###) ###-####' });

Dynamic Masking

This feature allows you to apply a dynamic mask to an input field. In this example, the input field with the id 'date' will be formatted as a date in the format MM/DD/YYYY.

const input = document.querySelector('#date');
Maska.create(input, { mask: '##/##/####' });

Custom Placeholders

This feature allows you to use custom placeholders in your masks. In this example, the input field with the id 'custom' will be formatted as a credit card number with 'X' as the placeholder.

const input = document.querySelector('#custom');
Maska.create(input, { mask: '####-####-####-####', placeholder: 'X' });

Other packages similar to maska

inputmask

Inputmask is a JavaScript library that creates an input mask. Inputmask can run against vanilla JavaScript, jQuery, and jqlite. It is more feature-rich compared to Maska, offering a wide range of options for different types of input masks, including numeric, date, and regex-based masks.

cleave.js

Cleave.js is a JavaScript library for formatting input text content when you are typing. It offers a variety of formatting options, including credit card numbers, phone numbers, dates, and numeral formatting. Cleave.js is similar to Maska but provides more advanced formatting options and better support for different locales.

vanilla-text-mask

Vanilla Text Mask is a pure JavaScript input mask library. It works with vanilla JavaScript and also has integrations for React, Angular, and Vue. It is similar to Maska in terms of functionality but offers more flexibility and integration options with modern JavaScript frameworks.

README

Maska

Simple zero-dependency input mask for Vue.js and vanilla JS. Demo and examples.

• No dependencies
• Small size (~2 Kb gziped)
• Ability to define custom tokens
• Supports repeat symbols and dynamic masks
• Works on any input (custom or native)

Install

npm install maska

To load latest version from CDN you can use:

<script src="https://cdn.jsdelivr.net/npm/maska@latest/dist/maska.js"></script>

Usage with Vue 2.x

If you load Vue.js via <script> then just add v-maska directive to your input:

<input v-maska="'###'">

You can add custom tokens by passing in object instead of string to directive:

<input v-maska="{ mask: 'Z*', tokens: { 'Z': { pattern: /[а-яА-Я]/ }}}">

With bundlers you can add global directive:

import Maska from 'maska'
Vue.use(Maska)

or import maska directive for local usage in component:

<template>
    <form>
        <input v-maska="'###'">
    </form>
</template>

<script>
import { maska } from 'maska'

export default {
    directives: { maska }
}
</script>

With Vue you could use computed property as mask value. In this case mask will be reactive.

Usage with Vue 3.x

With Vue 3.x you need to explicitly add Maska plugin or directive to your app:

const app = Vue.createApp({...})
// use as plugin
app.use(Maska);
// or as directive
// app.directive('maska', Maska.maska);
app.mount('#app');

Usage with vanilla JS

Just load script maska.js and init it, passing element(s) or document.querySelector expression:

var mask = Maska.create('.masked');

Mask could be set as data-mask attribute on element:

<input data-mask='##/##/####'>

or can be set by mask option on initialization:

var mask = Maska.create('.masked', {
    mask: '##/##/####'
});

You can pass custom tokens while initialization:

var mask = Maska.create('.masked', {
    tokens: { 'Z': { pattern: /[а-яА-Я]/ }}
});

You can destroy mask like that:

var mask = Maska.create('.masked');
mask.destroy();

Mask syntax

Default tokens:

{
    '#': { pattern: /[0-9]/ },
    'X': { pattern: /[0-9a-zA-Z]/ },
    'S': { pattern: /[a-zA-Z]/ },
    'A': { pattern: /[a-zA-Z]/, uppercase: true },
    'a': { pattern: /[a-zA-Z]/, lowercase: true },
    '!': { escape: true },
    '*': { repeat: true }
}

• Escape symbol escapes next token (mask !# will render #)
• Repeat symbol allows repeating current token until it’s valid (e.g. mask #* for all digits or A* A* for CARDHOLDER NAME)

You can add your own tokens by passing them in maska directive or create method at initialization (see above). Important: pattern field should be JS regular expression (/[0-9]/) or string without delimiters ("[0-9]").

Transform function for tokens

While specifying custom tokens you can also add a symbol-transformation behavior such as uppercase, lowercase, or even define a transform function:

{
    'T': { pattern: /[0-9]/, transform: (char) => String(Number(char) % 2) } // '1234567890' -> '1010101010'
}

Getting raw (unmasked) value

To get raw value read data-mask-raw-value property of input. You can subscribe to @maska event to know when this value updates. Please see examples page.

Dynamic masks

To use several masks on single input, pass array instead of string as mask value.

You could use it with Vue directives:

<input v-maska="['+1 (###) ##-##-##', '+1 (###) ###-##-##']">

<input v-maska="{ mask: ['!#HHHHHH', '!#HHHHHH-HH'], tokens: { 'H': { pattern: /[0-9a-fA-F]/, uppercase: true }}}">

and with vanilla JS attribute, but make sure that mask value is proper JSON, so use double quotes inside array:

<input data-mask='["# cm", "#.# cm", "#.## cm"]'>

Known issues

When used on input of type number could have inconsistent behavior in different browsers. Use attribute inputmode if you just need a numeric keyboard for given input.

Source of Inspiration

• vue-the-mask
• jQuery Mask Plugin