https://github.com/ionited/mask
Mask Core
https://github.com/ionited/mask
core javascript mask vanilla
Last synced: 6 months ago
JSON representation
Mask Core
- Host: GitHub
- URL: https://github.com/ionited/mask
- Owner: ionited
- License: mit
- Created: 2021-04-05T21:57:20.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2025-02-18T15:32:43.000Z (8 months ago)
- Last Synced: 2025-04-12T02:02:36.267Z (6 months ago)
- Topics: core, javascript, mask, vanilla
- Language: TypeScript
- Homepage:
- Size: 716 KB
- Stars: 17
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Mask
> Create your masks easily
Mask comes with three basic implementations MaskDefault, MaskNumber and MaskDate, but you can use MaskCore to do your own masks implementation easily.
## Quick start
Choose your favorite option below:
### Install with NPM
```
npm i @ionited/mask
```
### Get from UNPKG
[https://unpkg.com/@ionited/mask@latest/dist/mask.js](https://unpkg.com/@ionited/mask@latest/dist/mask.js)
---
## Usage
To basic usage you can simply call:
```js
Mask(document.querySelector('#input1'), { mask: '(99) 9999-9999' }); // To use MaskDefault
Mask(document.querySelector('#input2'), { number: true }); // To use MaskNumber
Mask(document.querySelector('#input3'), { date: 'DD/MM/YYYY' }); // To use MaskDate
```
### MaskDefault
A mask that receives a regex or a string with numbers, letters or other symbols
```ts
Mask(el: HTMLElement, { mask: RegExp | string | MaskDefaultOptions });
interface MaskDefaultOptions {
allowEmpty?: boolean;
mask: RegExp | string;
}
```
| Symbol | Pattern | Description
|:--------:|------------------|-------------
| 9 | `/^[0-9]$/` | Only numbers
| A | `/^[A-Za-zÀ-ÿ]$/`| Only letters
Any other symbol is fixed.
### MaskNumber
A mask for monetary and decimal values
```ts
Mask(el: HTMLElement, { number: true | MaskNumberOptions });
interface MaskNumberOptions {
allowEmpty: boolean;
allowNegative: boolean;
decimal: number;
decimalPoint: string;
end: boolean;
prefix: string;
suffix: string;
thousandPoint: string;
}
```
### MaskDate
A mask for date and time values
```ts
Mask(el: HTMLElement, { date: string | MaskDateOptions });
interface MaskDateOptions {
format: string;
placeholders: { [key: string]: string };
}
```
| Format | Pattern | Description
|:---------:|---------|-------------
| YYYY | 0000-∞ | Year
| MM | 01-12 | Month
| DD | 01-31 | Day
| hh | 00-23 | Hour
| mm | 00-59 | Minutes
| ss | 00-59 | Seconds
Any other symbol is fixed.
### MaskCore
You can create your own mask logic easily, you only need `register` a mask and use:
```ts
Mask.register(name: string, mask: any): void;
```
The recommended way to do a new mask is writing a class that extends `MaskOptions`
```ts
interface MaskOptions {
instance: MaskCore;
init?(data: MaskData): void;
input?(data: MaskData): void;
format(data: MaskData): void;
focus?(data: MaskData): void;
blur?(data: MaskData): void;
mouseover?(data: MaskData): void;
mouseout?(data: MaskData): void;
}
interface MaskData {
cursorPosition: number;
delete: boolean;
focus: boolean;
input: string;
output: string;
outputRaw: any;
}
```
MyMask example (only accept numbers):
```ts
import { MaskData, MaskCore, MaskOptions } from '@ionited/mask/core';
export class MyMask implements MaskOptions {
instance: MaskCore;
constructor(el: HTMLInputElement) {
this.instance = new MaskCore(el, this);
}
init(data: MaskData) {
this.format(data);
}
format(data: MaskData) {
data.output = data.input.replace(/[^0-9]/g, '');
}
}
```
Register and use:
```ts
Mask.register('myMask', MyMask); // Register
Mask(document.querySelector('#myMask'), { myMask: true }); // Enjoy your own mask!
```
## License
Copyright (c) 2021 Ion. Licensed under [MIT License](LICENSE).
[https://ionited.io](https://ionited.io)