Press "Enter" to skip to content

Simple Input Mask Component for Vue.js and vanilla JS – Maska

Input Mask Component – Simple zero(0)-dependency input mask for Vue.js and vanilla JS.  Maska is a small and customizable input masks element for Vanilla JavaScript and Vue.js framework.

How to make use of it:

1. Install and download the Maska library.

# NPM
$ npm install maska --save

2. Load the Maska library from the dist folder.

3. Define the masks guidelines within the data-mask attribute. All default tokens:

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



4. Initialize the plugin on the enter and performed.

Maska.create('.masked');

5. Customize the masks tokens.

Maska.create('.masked',{
  '#': { 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 }
});

6. Destroy the input masks plugin.

var myMask = Maska.create('.unmasked');
myMask.destroy();

Javascript Masking in Text Field, Easy Input Mask Component In Vanilla JavaScript & Vue.js, Vue Masked Input, Javascript Input Mask, Vanilla Javascript Input Mask

Changelog:

v1.1.2 (02/08/2020)

  • Prevent including a number of event listeners

See Demo And Download

Official Website(beholdr): Click Here

This superior jQuery/javascript plugin is developed by beholdr. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *