Easy Input Mask Component using JavaScript and Vue Js

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

Maska Vanilla JavaScript / Vue.js framework implementation

Install and Download:

# NPM
$ npm install maska --save

Import the Maska library

// ES Module
import { MaskInput } from "maska"
// Browser

Define the mask rules in the data-mask attribute. All default tokens:

• '#': digits, { pattern: /[0-9]/ }
• '@': letters, { pattern: /[a-zA-Z]/ }
• '*': letters & digits, { pattern: /[a-zA-Z0-9]/ }
• '!': used to escape symbols

Initialize the plugin on the input and done

    new MaskInput("[data-maska]")

Customize the mask tokens

Available mask options

Available input options

new MaskInput("input", {
    mask: "#-#",
    reversed: true,
    onMaska: (detail) => console.log(detail.completed),
    postProcess: (value) => value.slice(0, 5), 
    preProcess: (value) => { return value.toUpperCase(); },
})

Destroy the input mask plugin

var myMask = new MaskInput("[data-maska]")
myMask.destroy();