Minimalist Input Mask Library – Input Masks

Input Masks is a native vanilla JavaScript library for masking input fields with custom mask formats, placeholders and callbacks.

How to use it:

Just include the core JavaScript file on the webpage and you’re done.

<script src="index.js"></script>

The JavaScript to mask a specific input field.

inputMask(document.getElementById('test_field'), {
  /**
   * mask
   *
   * Defines the format of the mask.
   * Built-in identifiers:
   *   #: [0-9]
   *   a: [A-Za-z]
   */
  mask: '###-##-####',
  /**
   * placeholder
   *
   * A value to be displayed when the
   * field is in focus. Defaults to the
   * mask string.
   */
  placeholder: '___-__-____',
  /**
   * onMatch
   *
   * A function to be run on blur if the
   * input value matches the mask.
   *
   * @param {String} The passing string
   */
  onMatch: function(value) {
    console.log('Value ' + value + ' matches the input mask.');
  },
  /**
   * onFail
   *
   * A function to be run on blur if the
   * input value does not match the mask.
   */
  onFail: function() {
    console.log('No match was found for that value.');
  },
  /**
   * clearOnFail
   *
   * When true, the input field will have its
   * value cleared on blur if the value does
   * not match the mask. Defaults to true.
   */
  clearOnFail: false
});