maska/docs/v3/hooks.md

Hooks & Events

Hooks

Use hooks to transform masking value:

• preProcess hook is called before the mask processing
• postProcess hook is called after the mask processing, but before the input's value is set

For example, you can use it to check for a maximum length of a masked string:

new MaskInput("input", {
  postProcess: (value: string) => value.slice(0, 5)
})

Events

You can subscribe to maska event that fires after each mask processing. Event will contain detail property with a given structure:

Description

• masked: masked value
• unmasked: unmasked value
• completed: flag that current mask is completed

Types

interface MaskaDetail {
  masked: string
  unmasked: string
  completed: boolean
}

const onMaska = (event: CustomEvent<MaskaDetail>) => {
  console.log({
    masked: event.detail.masked,
    unmasked: event.detail.unmasked,
    completed: event.detail.completed
  })
}

Vanilla JS

document.querySelector("input").addEventListener("maska", onMaska)

Vue

<input v-maska data-maska="#-#" @maska="onMaska" />

Alpine

<input x-maska data-maska="#-#" x-on:maska="onMaska" />

Svelte

<input use:maska data-maska="#-#" on:maska={onMaska} />

Alternatively, you can pass a callback function directly using the onMaska option:

Vanilla JS

new MaskInput("input", {
  onMaska: (detail: MaskaDetail) => console.log(detail.completed)
})

Vue

<script setup lang="ts">
const options = {
  onMaska: (detail: MaskaDetail) => console.log(detail.completed)
}
</script>

<template>
  <input v-maska="options">
</template>

Alpine

<div x-data="{ options: { onMaska: (detail) => console.log(detail.completed) }}">
  <input x-maska="options">
</div>

Svelte

<script lang="ts">
const options = {
  onMaska: (detail: MaskaDetail) => console.log(detail.completed)
}
</script>

<input use:maska={options}>