Vue Input Mask

Appearance

On this page

Guide ​

Default Tokens ​

#  - Number only, [0-9]
$  - Char only, [A-Z, a-z]
*  - Number or Char, [a-z, A-Z, 0-9]
A  - Uppercase char [A-Z], transform: (c) => c.toLocaleUpperCase()
a  - Lowercase char [a-z], transform: (c) => c.toLocaleLowerCase()
\\ - Escape token, eg: \\$
{} - Regular expression, eg: {[A-F]}

Props ​

NameTypeRequiredDefaultDescription
maskStringYes''The input mask pattern
tokensObjectNo{}The custom tokens
rawFunctionNoundefinedThe callback function, wich will receive the raw input value.

Escape token char ​

vue
<script setup>
import { vMask } from "@opentf/vue-input-mask";
</script>

<template>
  <input v-mask="{ mask: '\\$ ##.##' }" />
</template>

Get raw value ​

Raw:

vue
<script setup>
import { ref } from "vue";
import { vMask } from "@opentf/vue-input-mask";

const raw = ref("");
</script>

<template>
  <input v-mask="{ mask: '+1 (###) ###-####', raw: (v) => (raw = v) }" />
  <p>Raw: {{ raw }}</p>
</template>

Custom Token ​

vue
<script setup>
import { vMask } from "@opentf/vue-input-mask";
</script>

<template>
  <input
    v-mask="{
      mask: '##:## @M',
      tokens: {
        '@': {
          pattern: '[AP]',
          transform: (v) => v.toLocaleUpperCase(),
        },
      },
    }"
  />
</template>