Multifunctional Input Mask Library – Text Mask

Text Mask is a lightweight yet multifunctional input mask library which can be implemented in vanilla JavaScript and React/AngularJS/Vue applications.

The library allows your users to more easily fill input field where you would like them to enter the text in a certain format.

Installation:

# NPM
$ npm install vanilla-text-mask --save

Basic usage:

Import the core JavaScript vanillaTextMask.js into your html page.

<script src="/path/to/vanillaTextMask.js"></script>

Define the data format as follows:

var phoneMask = ['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]

Initialize the Text Mask on a specified input field.

var myInput = document.querySelector('.myInput')
var maskedInputController = vanillaTextMask.maskInput({
    inputElement: myInput,
    mask: phoneMask
})

More options & functions available.

vanillaTextMask.maskInput({
  // guide or no guide mode
  guide: true,
  // custom placeholder char
  placeholderChar: '_',
  // when true, adding or deleting characters will not affect the positions of existing characters.
  keepCharPositions: false,
  // display the mask as a placeholder in place of the regular placeholder when the input element value is empty
  showMask: true,
  // modify the conformed value before it is displayed on the screen
  pipe: function(conformedValue, config){
    // ...
  }
  
})

Changelog:

08/30/2018

• Also supports Vue, Ember.