Multifunctional Input Mask Library – Text Mask

Category: Form , Javascript , Recommended | August 30, 2018
Author: msafi
Views Total: 887 views
Official Page: Go to website
Last Update: August 30, 2018
License: MIT

Preview:

Multifunctional Input Mask Library – Text Mask

Description:

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.

You Might Be Interested In:


Leave a Reply