Input Mask

Vue Bootstrap 5 Input Mask plugin

Input Mask plugin contains MDBInput component with mask and v-mdb-input-mask directive which can be used on other inputs.

Responsive Input Mask directive for the latest Bootstrap 5 and Vue 3. Set a predefined format of forms. Phone number, special characters, clear incomplete & other examples.

Note: Read the API tab to find all available options and advanced customization

Basic example

Input Mask comes with three predefined masks directives:

  • a - Alpha characters (defaut: A-Z,a-z)
  • 9 - Numeric characters (0-9)
  • * - Alphanumeric characters (A-Z,a-z,0-9)

To initialize Input Mask on element pass mask string or object to inputMask. 

<template>
  <MDBInput label="Basic example" :inputMask="mask" />
</template>
<script>
  import { MDBInput } from "mdb-vue-input-mask";

  export default {
    components: {
      MDBInput
    },
    setup() {
      const mask = ref("aaa999***");

      return {
        mask,
      };
    },
  };
</script>
<script setup lang="ts">
  import { MDBInput } from "mdb-vue-input-mask";

  const mask = ref("aaa999***");
</script>

Clear incomplete

By default, Input Mask will clear incomplete input value on blur. Turn this behavior off with clearIncomplete: false option. 

<template>
  <MDBInput label="Clear incomplete" :inputMask="{ mask: 'aaa999***', clearIncomplete: false }" />
</template>
<script>
  import { MDBInput } from "mdb-vue-input-mask";

  export default {
    components: {
      MDBInput
    },
  };
</script>
<script setup lang="ts">
  import { MDBInput } from "mdb-vue-input-mask";
</script>

Custom mask

Define custom mask with customMask for mask symbol and customValidator with custom mask regex pattern. Example below will only allow abc letters to be typed for p mask. 

<template>
  <MDBInput label="Custom mask" :inputMask="{
       mask: '999ppp999',
       customMask: 'p',
       customValidator: '[abc]',
     }" />
</template>
<script>
  import { MDBInput } from "mdb-vue-input-mask";

  export default {
    components: {
      MDBInput
    },
  };
</script>
<script setup lang="ts">
  import { MDBInput } from "mdb-vue-input-mask";
</script>

You can also set more than one mask by passing multiple characters separated by comma to customMask, and their coresponding validators separated by comma to customValidator 

<template>
  <MDBInput label="Custom mask" :inputMask="{
      mask: 'pppbbbccc',
      customMask: 'p,b,c',
      customValidator: '[abc],[1-2],[^a-c]',
    }" />
</template>
<script>
  import { MDBInput } from "mdb-vue-input-mask";

  export default {
    components: {
      MDBInput
    },
  };
</script>
<script setup lang="ts">
  import { MDBInput } from "mdb-vue-input-mask";
</script>

Special characters

Input Mask allows any non alphanumeric character to be used inside the inputMask. Those characters will be hardcoded into the input during typing 

<template>
  <MDBInput label="Phone number with country code" :inputMask="{
      mask: '+48 999-999-999'
    }" />

  <MDBInput label="Book number" :inputMask="'ISBN 0-99999-999-0'" />
</template>
<script>
  import { MDBInput } from "mdb-vue-input-mask";

  export default {
    components: {
      MDBInput
    },
  };
</script>
<script setup lang="ts">
  import { MDBInput } from "mdb-vue-input-mask";
</script>

Mask placeholder

Set placeholder for mask while typing with maskPlaceholder: true. Default placeholder is an underscore sign _. Change it with charPlaceholder. You can use single character or define placeholder for whole mask 

<template>
  <MDBInput label="Default placeholder"
    :inputMask="{ mask: '(99)-999-99', maskPlaceholder: true }" />

  <MDBInput label="Custom placeholder" :inputMask="{
      mask: '99/99/9999 99:99',
      maskPlaceholder: true,
      charPlaceholder: 'dd/mm/yyyy hh:mm',
    }" />
</template>
<script>
  import { MDBInput } from "mdb-vue-input-mask";

  export default {
    components: {
      MDBInput
    },
  };
</script>
<script setup lang="ts">
  import { MDBInput } from "mdb-vue-input-mask";
</script>

Input Mask - API

Import

<script>
  import { MDBInput, mdbInputMask } from "mdb-vue-input-mask";
</script>

Arguments

Name Type Default Description
mask String "" Defines Input Mask pattern to be added to input element
charPlaceholder String "_" Placeholder character for covered characters in mask. Visible while typing only when maskPlaceholder is set to true
maskPlaceholder Boolean false Sets charPlaceholder on or off
inputPlaceholder Boolean true Shows information about the mask pattern on inactive input
clearIncomplete Boolean true Clear incomplete input value on blur
customMask String "" Defines character to be used as custom mask. Allows multiple characters to be passed, separated by comma
customValidator String "" Regex pattern to match characters in mask. Allows multiple validators corespondiing to their masks to be passed, separated by comma.
callback Function Function that will be called when Inputmask element receives new value. Returns the value of the input.
onComplete Function Function that will be called when Inputmask element receives completed mask pattern value. Returns the value of the input.