Feature-rich Input Mask Plugin With Vanilla JavaScript – imaskjs

Preview:

Description:

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

Currently supports 6 mask types: date, number, Pattern, Regex, Function, and Dynamic. Also works with Angular, React, React Native, and Vue.js.

Features:

• 5 mask types: date, number, Regex, Function, and Dynamic.

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:

v7.1.3 (07/18/2023)

• bugfix

v7.1.2 (07/12/2023)

• fix exports in package.json and use typesVersions to resolve types
• remove types from dist folder
• now esm part in path can be skipped: import ‘imask/esm/masked/number’ -> import ‘imask/masked/number’;

v7.1.1 (07/12/2023)

• new expose option for pattern block and dynamic mask
• set type: “module” for all packages except Angular
• Enum mask can now handle variable length keys

v7.0.1 (06/23/2023)

• minor bug fixes

v7.0.0 (06/19/2023)

• prepare callback has been renamed to prepareChar. prepare now accepts the entire string. This can be useful if you need to handle pasting a value.
• resolve method no longer returns a value
• doParse and doFormat have been removed
• Number mask: signed option has been removed. Use min and max instead; ; Now defaults are min=Number.MIN_SAFE_INTEGER and max=Number.MAX_SAFE_INTEGER; If the mask can only accept negative values, a minus sign is automatically added

v6.6.3 (06/08/2023)

• bugfix

v6.6.2 (06/02/2023)

• bugfix

v6.6.1 (04/27/2023)

• improve resolving mask for dynamic + pattern masks
• React: fix types once again
• Angular: add Unmask and Value types

v6.6.0 (04/17/2023)

• secured text entry available for the pattern mask via new displayChar option

v6.5.1 (04/12/2023)

• Bugfixes

v6.5.0 (04/05/2023)

• New plugin for Solidjs.
• Angular: update to v15
• React: fix types
• Add new skipInvalid option
• Fix handling small numbers with Number mask
• Add new modes (append, remove) for eager option
• fix bugs

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