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

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 add data-mdb-input-mask attribute with mask format to 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 coresponding 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

Input Mask - API

Usage

Input Mask comes with three predefined masks formats:

  • 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 add data-mdb-input-mask attribute with mask format to input.

Via data attributes


        <input type="text" data-mdb-input-mask="aaa999***"/>

Via JavaScript


        var options = {
          inputMask: "aaa999***"
        }
        var inputElement = document.getElementById('js-usage-example');
        var instance = new Inputmask(inputElement, options)

Via jQuery

Note: By default, MDB does not include jQuery and you have to add it to the project on your own. 


        $('#jquery-usage-example').inputMask();

Options

Options can be passed via data attributes, JavaScript, or jQuery. For data attributes, append the option name to data-mdb-, as in data-mdb-input-mask="aaa".

Name Type Default Description
inputMask 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.

Methods

Name Parameters Description Example
dispose Removes the Inputmask instance. instance.dispose()
getInstance element Static method which allows to get the Inputmask instance associated with a DOM element. Inputmask.getInstance(element) 

        var inputElement = document.getElementById('inputmask-example');
        var instance = Inputmask.getInstance(inputElement);
        isntance.dispose();

Events

Name Description
input.mdb.inputmask Emitted when Inputmask instance element receives new value. Returns value object inside event callback with input typed characters.
complete.mdb.inputmask Emitted when Inputmask instance element receives completed mask pattern value. Returns value object inside event callback with completed value. 

          var inputElement = document.getElementById('inputmask-example');
          inputElement.addEventListener('complete.mdb.inputmask', () => alert('Mask input completed!'));

Import

MDB UI KIT also works with module bundlers. Use the following code to import this component: 


        import InputMask from 'mdb-input-mask';