Feature-rich Input Mask Plugin With Vanilla JavaScript – imaskjs

Category: Form , Javascript | October 12, 2018
Author: uNmAnNeR
Views Total: 660
Official Page: Go to website
Last Update: October 12, 2018
License: MIT

Preview:

Feature-rich Input Mask Plugin With Vanilla JavaScript – imaskjs

Description:

imaskjs is a vanilla JavaScript input mask plugin that enables the user to enter the data in a certain format.

Also works with Angular, React, React Native and Vue.js.

Features:

  • 2 built-in mask types: date and number
  • Allows you to create mask rules using Regex or Function.

How to use it:

Insert the imaskjs library into the page.

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

Apply a custom mask to your input field using Regex.

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

Apply the number mask to your number field.

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

Apply the date mask 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 also apply multiple masks to the same field.

<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 event handlers.

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

Changelog:

10/12/2018

  • escape radix char

09/13/2018

  • v4.0

08/04/2018

  • Bugfix

Leave a Reply