Feature-Rich Input Mask With Vanilla JavaScript | imaskjs

imaskjs is a vanilla JavaScript Input Mask plugin that enables the user to enter data in a specific format. It also works with Angular, React, React Native and Vue.js.

Features:

  • Two types of masks are combined: date and number
  • It allows you to create mask rules using Regex or the function.

How to make use of it:

Insert the imaskjs library into the web page.

<script defer src="https://unpkg.com/imask"></script>

Apply a customized mask to your input field utilizing Regex.

<input id="example" type="text" value="">
var regExpMask = new IMask(document.getElementById('example'),{
    mask: /^[1-6]\d{0,5}$/
});

Apply the quantity mask to your quantity discipline.

<input id="example" type="text" value="">
var numberMask = new IMask(document.getElementById('example'), {
    mask: Number,
    min: -1000,
    max: 1000,
    thousandsSeparator: ' '
})

Apply the date masks to your date field.

<input id="example" type="text" value="">
var dateMask = new IMask(document.getElementById('date-mask'),{
    mask: Date,
    min: new Date(2000, 0, 1),
    max: new Date(2020, 0, 1),
    lazy: false
})

You can even apply a number of masks to the identical discipline.

<input id="example" type="text" value="">
var dynamicMask = new IMask(document.getElementById('dynamic-mask'),{
    mask: [{
      mask: '+{1}(000)000-00-00'
    },
    {
      mask: /^\S*@?\S*$/
    }]
})

Available occasion handlers.

var myMask = new IMask()
.on('complete', function() {
  // do something
})
.on('accept', function() {
  // do something
})

Convert and format values.

var phonePipe = IMask.createPipe(
    phoneMask.masked,
    IMask.PIPE_TYPE.UNMASKED,
    IMask.PIPE_TYPE.MASKED
);

Feature-rich Input Mask Plugin, imaskjs Github, javascript mask string


See Demo And Download

Official Website(uNmAnNeR): Click Here

This superior jQuery/javascript plugin is developed by uNmAnNeR. For extra Advanced Usage, please go to the official website.

Share