Feature-rich Input Mask Plugin With Vanilla JavaScript – imaskjs

Category: Form , Javascript | September 20, 2022
Author:uNmAnNeR
Views Total:1 view
Official Page:Go to website
Last Update:September 20, 2022
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:

1. Insert the imaskjs library into the page.

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

2. 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}$/
});

3. 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: ' '
})

4. Apply the date mask to your date field.

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

5. Apply the enum mask to your input field.

<input id="example" type="text" value="">
var dateMask = new IMask(document.getElementById('example'),{
    mask: IMask.MaskedEnum,
    enum: ['F1', 'G2', 'H3'],
})

6. Apply the range mask to your input field.

<input id="example" type="text" value="">
var dateMask = new IMask(document.getElementById('example'),{
    mask: IMask.MaskedRange,
    from: 1,
    to: 90,
    maxLength: 3,
    autofix: true,  // bound value
})

7. Apply the Pattern Mask to your input field.

  • 0 – any digit
  • a – any letter
  • * – any char
  • [] – make input optional
  • {} – include fixed part in unmasked value
  • ` – prevent symbols shift back
<input id="example" type="text" value="">
var dateMask = new IMask(document.getElementById('example'),{
    mask: '{#}000[aaa]/NIC-`*[**]'
})

8. 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*$/
    }]
})

9. Available event handlers.

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

10. Convert and format values.

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

Changelog:

v6.4.3 (09/20/2022)

  • Bugfix

v6.4.2 (02/09/2022)

  • React: now possible to pass ref to IMaskInput and get access to internal instance of Masked
  • React: fix types for IMaskInput
  • fix bugs around using eager with dynamic mask
  • update deps

v6.4.0 (02/03/2022)

  • refactor cursor positioning for pattern mask (seems i understand now how it works)
  • add new overflow: ‘shift’ flag
  • fix bugs

v6.3.0 (01/31/2022)

  • add autofix: ‘pad’ option for Date and Range masks
  • add eager option to eager add/remove fixed parts of pattern mask
  • better callbacks and state management for React hook
  • add support for Angular 13
  • fix bugs & update deps

v6.2.2 (09/15/2021)

  • fix build

v6.2.1 (09/10/2021)

  • update

v6.1.0 (07/05/2021)

  • update angular plugin to work with Angular 12+
  • fix some typings
  • update deps

v6.0.7 (02/12/2021)

  • small bug fixes
  • fix esm builds

v6.0.5 (05/23/2020)

  • minor bug fixes

v6.0.3 (02/18/2020)

  • small bug fixes
  • use globalThis from core-js only in polyfill

v6.0.1 (01/04/2020)

  • fix some minor bugs

v6.0.0 (12/25/2019)

  • Add pipe feature – now IMask can be used to format values
  • Add compatibility with web components
  • Use globalThis to resolve circular deps and inject IMask
  • Support contenteditable
  • Add esm modules chunks to reduce bundle size

v5.2.1 (08/28/2019)

  • Angular: remove onTouched trigger on change
  • fix esm exports
  • update deps

v5.2.0 (08/15/2019)

  • add esm build (package.module)
  • fix update options for Angular
  • fix overwrite option for dynamic mask
  • update deps

07/30/2019

  • v5.1.8: fix babel config, now should work in IE 11

07/08/2019

  • v5.1.7: fix bugs with pattern and dynamic masks

06/22/2019

  • v5.1.6: bugfix

05/26/2019

  • v5.1.5

05/16/2019

  • v5.1.4: Bugfix

04/27/2019

  • v5.1.1: Bugfix; add missed typings for autofix option

03/30/2019

  • Allow empty string for any numbers

01/26/2019

  • v4.1.5

01/05/2019

  • v4.1.4

10/12/2018

  • escape radix char

09/13/2018

  • v4.0

08/04/2018

  • Bugfix

You Might Be Interested In:


Leave a Reply