/

Plugins

Documentation Built-in core plugins

On this page

For initial calibration

Maskito libraries were created to prevent only user from typing invalid value. However, sometimes you (developer) need to enable mask but you not sure that you programmatically patched textfield with valid value. In this case you can use maskitoTransform or just add maskitoInitialCalibrationPlugin to mask options. 
    
      
    

      
      
    

  
    
      [object Object]
    

      
      
    

  
    
      import {Maskito} from '@maskito/core';

import maskitoOptions from './mask';

const element = document.querySelector('input')!;

element.value = '12345'; // patch with invalid initial value

// enable mask
const maskedInput = new Maskito(element, maskitoOptions);

console.info(element.value); // 123

// Call this function when the element is detached from DOM
maskedInput.destroy();

For composition event

By default, Maskito does not break IME Composition and waits until compositionend fires to begin calibration of the textfield's value. It is especially important for East Asian languages such as Chinese, Japanese, Korean, and other languages with complex characters.

However, sometimes this behaviour is not desired and you can want to enable mask validation on every keystroke (to be like a classic not-composition input). For example, some Android devices with enabled system autocomplete can interpret user's input as part of composition event – waiting for compositionend can be not required for some cases (e.g. entering of numbers or your application is not used by East Asian clients). For this cases, you can use maskitoStrictCompositionPlugin . It applies mask's constraints on ANY intermediate value of IME composition. 

    
      
    

      
      
    

  
    
      [object Object]
    

      
      
    

  
    
      import {Maskito, MaskitoOptions} from '@maskito/core';
import maskitoOptions from './mask';

const element = document.querySelector('input,textarea')!;
const maskedInput = new Maskito(element, maskitoOptions);

// Call this function when the element is detached from DOM
maskedInput.destroy();
    

      
      
    

  
    
      import {Component} from '@angular/core';
import {MaskitoDirective} from '@maskito/angular';
import type {MaskitoOptions} from '@maskito/core';

import mask from './mask';

@Component({
  selector: 'my-app',
  imports: [MaskitoDirective],
  template: '<input [maskito]="options" />',
})
export class App {
  readonly options: MaskitoOptions = mask;
}
    

      
      
    

  
    
      import * as React from 'react';
import {useMaskito} from '@maskito/react';

import options from './mask';

export default function App() {
  const maskedInputRef = useMaskito({options});

  return <input ref={maskedInputRef} />;
}
    

      
      
    

  
    
      import {createApp} from 'vue';
import {maskito} from '@maskito/vue';

import options from './mask';

const app = createApp({
  template: '<input v-maskito="options" />',
  directives: {maskito},
  data: () => ({ options }),
});

For change event

Native beforeinput event default behavior is cancelled to process user entered invalid value. This causes native change event to NOT be dispatched by browser. A change event, as opposed to input , is triggered only when user left the field and value was changed during interaction. If you rely on this behavior, add maskitoChangeEventPlugin to your mask configuration. It will dispatch synthetic change event using the same logic. 
    
      
    

      
      
    

  
    
      [object Object]
    

      
      
    

  
    
      import {Maskito, MaskitoOptions} from '@maskito/core';
import maskitoOptions from './mask';

const element = document.querySelector('input,textarea')!;
const maskedInput = new Maskito(element, maskitoOptions);

// Call this function when the element is detached from DOM
maskedInput.destroy();
    

      
      
    

  
    
      import {Component} from '@angular/core';
import {MaskitoDirective} from '@maskito/angular';
import type {MaskitoOptions} from '@maskito/core';

import mask from './mask';

@Component({
  selector: 'my-app',
  imports: [MaskitoDirective],
  template: '<input [maskito]="options" />',
})
export class App {
  readonly options: MaskitoOptions = mask;
}
    

      
      
    

  
    
      import * as React from 'react';
import {useMaskito} from '@maskito/react';

import options from './mask';

export default function App() {
  const maskedInputRef = useMaskito({options});

  return <input ref={maskedInputRef} />;
}
    

      
      
    

  
    
      import {createApp} from 'vue';
import {maskito} from '@maskito/vue';

import options from './mask';

const app = createApp({
  template: '<input v-maskito="options" />',
  directives: {maskito},
  data: () => ({ options }),
});