Author: | uNmAnNeR |
---|---|
Views Total: | 368 views |
Official Page: | Go to website |
Last Update: | July 18, 2023 |
License: | MIT |
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