Multifunctional Input Mask Library – Text Mask

Category: Form , Javascript , Recommended | August 30, 2018
Views Total:1,446 views
Official Page:Go to website
Last Update:August 30, 2018


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.


$ 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.

  // 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){
    // ...



  • Also supports Vue, Ember.

You Might Be Interested In:

Leave a Reply