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

Preview:

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. Import the Maska library.

// ES Module
import { MaskInput } from "maska"
// Browser
<script src="/dist/maska.umd.min.js"></script>

3. 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

<input data-mask="+1 (###) ###-####" class="masked" type="tel" autocomplete="tel">
<input data-mask="##/##/####" class="masked">
<input data-mask="#*" class="masked">

4. Initialize the plugin on the input and done.

new MaskInput("[data-maska]")

5. Customize the mask tokens.

<input data-maska="Z-Z" data-maska-tokens="{ 'Z': { 'pattern': '[A-Z]' }}"> 
<input data-maska="Z-Z" data-maska-tokens="Z:[A-Z]"> 
<input data-maska="#00.#00.#00.#00" data-maska-tokens="0:[0-9]:optional">
<input data-maska="A A" data-maska-tokens="A:[A-Z]:multiple">
<input data-maska="9 99#,##" data-maska-tokens="9:[0-9]:repeated">

6. Available mask options.

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

7. 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(); },
})

8. Destroy the input mask plugin.

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

Changelog:

v2.1.6 (01/30/2023)

• Bugfix

v2.1.5 (01/21/2023)

• Bugfix

v2.1.4 (01/13/2023)

• Bugfix

v2.1.3 (12/30/2022)

• Bugfix

v2.1.2 (12/26/2022)

• Bugfix

v2.1.1 (12/10/2022)

• Bugfix

v2.1.0 (12/09/2022)

• Better work with custom components and v-model
• New feature: passing empty string or null as mask will disable it (allows any symbols)

v2.0.1 (12/07/2022)

• Bugfix

v2.0.0 (11/15/2022)

• Fully rewritten in TypeScript
• Autobind to vue variable
• Eager and reversed masking modes
• Optonal and repeated tokens
• Simplified syntax for custom tokens
• Dynamic masks with custom function logic
• Hooks for pre/post- processing
• Ability to replace or merge custom tokens

v1.5.1 (11/15/2022)

• Update

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