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

Category: Form , Javascript | November 14, 2021
Author:beholdr
Views Total:901 views
Official Page:Go to website
Last Update:November 14, 2021
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.

var mask = 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. You can now pass custom preprocessing transformation function for entire input

var mask = Maska.create('.masked', {
    preprocessor: value => {
      return value.toUpperCase();
    }
});

7. Destroy the input mask plugin.

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

Changelog:

v1.5.0 (11/14/2021)

  • Add preprocessor option

v1.4.7 (11/07/2021)

  • Fix unnecessary mask update on state change

v1.4.6 (10/02/2021)

  • Fixed init value in vue 3.x

v1.4.5 (07/23/2021)

  • Fixed bugs in Vue 3+

v1.4.4 (07/10/2021)

  • Fixed bugs in Vue

v1.4.3 (07/02/2021)

  • Make tokens argument optional

v1.4.2 (05/28/2021)

  • Bugfix

v1.4.1 (02/23/2021)

  • Fixed bug with dynamic mask

v1.4.0 (02/07/2021)

  • Ability to get raw (unmasked) value

v1.3.2 (11/30/2020)

  • Add typescript basic declarations

v1.3.1 (10/16/2020)

  • Better support for Vue.js 3.

v1.2.0 (10/11/2020)

  • Added custom transform function support alongside uppercase and lowercase

v1.2.0 (10/11/2020)

  • Added custom transform function support alongside uppercase and lowercase

v1.2.0 (09/28/2020)

  • Now the masked symbol is shown immediately

v1.1.6 (09/13/2020)

  • Fix cursor jumps when editing first symbol

v1.1.5 (08/20/2020)

  • Update

v1.1.4 (03/14/2020)

  • Update

v1.1.2 (02/08/2020)

  • Prevent adding multiple event listeners

You Might Be Interested In:


Leave a Reply