Easy Input Mask Component In Vanilla JavaScript & Vue.js – Maska

Category: Form , Javascript | October 17, 2019
Author: beholdr
Views Total: 69
Official Page: Go to website
Last Update: October 17, 2019
License: MIT

Preview:

Easy Input Mask Component In Vanilla JavaScript & Vue.js – Maska

Description:

Maska is a small and customizable input mask component for Vanilla JavaScript and Vue.js framework.

How to use it (Vanilla JS):

1. Install and download the Maska library.

# NPM
$ npm install maska --save

2. Load the Maska library from the dist folder.

<script src="/dist/maska.js"></script>

3. Define the mask rules in the data-mask attribute. All 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 }
<input data-mask="+1 (###) ###-####" class="masked" type="tel" autocomplete="tel">
<input data-mask="A* A*" class="masked">
<input data-mask="##/##/####" class="masked">
<input data-mask="#*" class="masked">

4. Initialize the plugin on the input and done.

Maska.create('.masked');

5. Customize the mask 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 mask plugin.

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

You Might Be Interested In:


Leave a Reply