Minimalist Input Mask Library – Input Masks

Category: Form , Javascript | June 28, 2016
Author: austinwulf
Views Total: 3,109
Official Page: Go to website
Last Update: June 28, 2016
License: MIT

Preview:

Minimalist Input Mask Library – Input Masks

Description:

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

});

You Might Be Interested In:


Leave a Reply