Input Mask MDB Pro component

Input Mask - Bootstrap 5 & Material Design 2.0 plugin

The Input Mask is a custom directive which allows to set a predefined format of forms.

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-input-mask attribute with mask format to input.


          <div class="form-outline">
            <input type="text" id="basic-example" class="form-control" data-input-mask="99-999-99"/>
            <label class="form-label" for="basic-example">Basic example</label>
          </div>
        

Clear incomplete

By default, Input Mask will clear incomplete input value on blur. Turn this behavior off with data-clear-incomplete="false".


          <div class="form-outline">
            <input type="text" id="clear-incomplete" class="form-control" data-input-mask="99-999-99" data-clear-incomplete="false"/>
            <label class="form-label" for="clear-incomplete">Clear incomplete</label>
          </div>
        

Custom mask

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


          <div class="form-outline">
            <input type="text" id="custom-mask" class="form-control" data-input-mask="999ppp999" data-custom-mask="p" data-custom-validator="[abc]"/>
            <label class="form-label" for="custom-mask">Custom mask</label>
          </div>
        

You can also set more than one mask by passing multiple characters separated by comma to data-custom-mask, and their coresponding validators separated by comma to data-custom-validator


          <div class="form-outline">
        <input type="text" id="custom-masks" class="form-control" data-input-mask="pppbbbccc" data-custom-mask="p,b,c" data-custom-validator="[abc],[1-2],[^a-c]"/>
        <label class="form-label" for="custom-masks">Custom mask</label>
          </div>
        

Special characters

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


          <div class="form-outline">
            <input type="text" id="phone" class="form-control" data-input-mask="+48 999-999-999"/>
            <label class="form-label" for="phone">Phone number with country code</label>
          </div>
          <div class="form-outline">
            <input type="text" id="book" class="form-control" data-input-mask="ISBN 0-99999-999-0"/>
            <label class="form-label" for="book">Book number</label>
          </div>
        

Mask placeholder

Set placeholder for mask while typing with data-mask-placeholder="true". Default placeholder is an underscore sign _. Change it with data-char-placeholder. You can use single character or define placeholder for whole mask


          <div class="form-outline">
            <input type="text" id="defaultPlaceholder" class="form-control" data-input-mask="(99)-999-99" data-mask-placeholder="true"/>
            <label class="form-label" for="defaultPlaceholder">Default placeholder</label>
          </div>
          <div class="form-outline">
            <input type="text" id="customPlaceholder" class="form-control" data-input-mask="99/99/9999 99:99" data-mask-placeholder="true" data-char-placeholder="dd/mm/yyyy hh:mm"/>
            <label class="form-label" for="customPlaceholder">Custom placeholder</label>
          </div>
        

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-input-mask attribute with mask format to input.

Via data attributes


        <input type="text" data-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-, as in data-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-ui-kit';