Author: | uNmAnNeR |
---|---|
Views Total: | 143 views |
Official Page: | Go to website |
Last Update: | April 27, 2023 |
License: | MIT |
Preview:

Description:
imaskjs is a vanilla JavaScript input mask plugin that enables users 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.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