Input Mask
Bootstrap 5 Input Mask plugin
The Input Mask is a custom directive which allows to set a predefined format of forms.
Responsive Input Mask directive for the latest Bootstrap 5. 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
Note: Currently, the plugin is only compatible with the basic MDB package imported in UMD format. More about import MDB formats.
Basic example
Input Mask comes with three predefined masks directives:
- a - Alpha characters (default: A-Z,a-z)
- 9 - Numeric characters (0-9)
- * - Alphanumeric characters (A-Z,a-z,0-9)
To initialize Input Mask on an element, add the data-mdb-input-mask-init attribute and data-mdb-input-mask attribute with mask format to the input.
Clear incomplete
By default, Input Mask will clear incomplete input value on blur. Turn this behavior off with data-mdb-clear-incomplete="false".
Custom mask
Define custom mask with data-mdb-custom-mask for mask symbol and data-mdb-custom-validator with custom mask regex pattern. Example below will only allow abc letters to be typed for p mask.
You can also set more than one mask by passing multiple characters separated by comma to data-mdb-custom-mask, and their corresponding validators separated by comma to data-mdb-custom-validator
Special characters
Input Mask allows any non-alphanumeric character to be used inside the data-mdb-input-mask. Those characters will be hardcoded into the input during typing.
Mask placeholder
Set placeholder for mask while typing with data-mdb-mask-placeholder="true". Default placeholder is an underscore sign _. Change it with data-mdb-char-placeholder. You can use single character or define placeholder for whole mask.
Phone number input mask
Input mask can be used with Autocomplete to create an international phone number input. When user selects a country, input mask will be updated with mask pattern used in selected country.