Easy Input Mask Component using JavaScript and Vue Js
Alexander Shabunevich February 11, 2023
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: Design your professional Logo Designs 2022
Supported Devices
Chrome, MS Edge, Firefox, Opera, Safari, IE8+
Tags
javascript, vue, input, devstoc freebies, input mask, mask, vue js components