Feature-rich Input Mask Plugin With Vanilla JavaScript – imaskjs

Category: Form , Javascript | July 18, 2023
Author:uNmAnNeR
Views Total:368 views
Official Page:Go to website
Last Update:July 18, 2023
License:MIT

Preview:

Feature-rich Input Mask Plugin With Vanilla JavaScript – imaskjs

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

You Might Be Interested In:


Leave a Reply