diff --git a/docs/README.md b/docs/README.md index d1d0aa0..db859c3 100644 --- a/docs/README.md +++ b/docs/README.md @@ -410,7 +410,12 @@ new MaskInput("input", { # Events -You can subscribe to `maska` event, fired every time when mask applied: +There are two events you can subscribe to get the masking result: + +- `maska` event +- `input` event + +They are essentially the same, but the `input` event could be fired by any input logic, and the `maska` event is library specific. ## **Vanilla JS** @@ -426,7 +431,7 @@ document.querySelector("input").addEventListener("maska", onMaska) ``` -Callback will receive custom event contains `detail` property with given structure: +Both events contains `detail` property with given structure: ### **Description** diff --git a/src/mask-input.ts b/src/mask-input.ts index a287bfc..a78c4f0 100644 --- a/src/mask-input.ts +++ b/src/mask-input.ts @@ -86,7 +86,14 @@ export class MaskInput { } private readonly inputEvent = (e: Event | InputEvent): void => { - if (e instanceof InputEvent && e.data === '__MASKA__') return + if ( + e instanceof CustomEvent && + e.type === 'input' && + e.detail != null && + 'masked' in e.detail + ) { + return + } const input = e.target as HTMLInputElement const mask = this.items.get(input) as Mask @@ -153,6 +160,6 @@ export class MaskInput { } } input.dispatchEvent(new CustomEvent('maska', { detail })) - input.dispatchEvent(new InputEvent('input', { data: '__MASKA__' })) + input.dispatchEvent(new CustomEvent('input', { detail })) } }