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:

  1. # NPM

  2. $ npm install maska --save

Import the Maska library

  1. // ES Module

  2. import { MaskInput } from "maska"

  3. // Browser

  4. <script src="/dist/maska.umd.min.js"></script>

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
  1. <input data-mask="+1 (###) ###-####" class="masked" type="tel" autocomplete="tel">

  2. <input data-mask="##/##/####" class="masked">

  3. <input data-mask="#*" class="masked">

Initialize the plugin on the input and done

  1.     new MaskInput("[data-maska]")

Customize the mask tokens

  1. <input data-maska="Z-Z" data-maska-tokens="{ 'Z': { 'pattern': '[A-Z]' }}"> 

  2. <input data-maska="Z-Z" data-maska-tokens="Z:[A-Z]"> 

  3. <input data-maska="#00.#00.#00.#00" data-maska-tokens="0:[0-9]:optional">

  4. <input data-maska="A A" data-maska-tokens="A:[A-Z]:multiple">

  5. <input data-maska="9 99#,##" data-maska-tokens="9:[0-9]:repeated">

Available mask options

  1. <input data-maska="A-A" data-maska-tokens="A:[A-Z]" data-maska-eager="" data-maska-tokens-replace="" data-maska-reversed="">

Available input options

  1. new MaskInput("input", {

  2.     mask: "#-#",

  3.     reversed: true,

  4.     onMaska: (detail) => console.log(detail.completed),

  5.     postProcess: (value) => value.slice(0, 5), 

  6.     preProcess: (value) => { return value.toUpperCase(); },

  7. })

Destroy the input mask plugin

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

  2. myMask.destroy();

 

Next: 8 Steps to Drive Traffic to Your Website Through Social Media

Supported Devices

Chrome, MS Edge, Firefox, Opera, Safari, IE8+

ADN

Tags

javascript, vue, input, devstoc freebies, input mask, mask, vue js components

also view other related posts,