Easy Input Mask Component using JavaScript and Vue Js

Alexander Shabunevich February 11, 2023

ADN
easy-input-mask-component-using-javascript-and-vue-js

Live Preview Download

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();

 

Next: Free Marketing Automation Software for small business

also view other related posts,