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