/

Plugins KIT

Source code

On this page

 The page contains list of officially supported plugins by Maskito team.
If you wish to develop your own plugin, read documentation page about plugins .

Selection Change Handler

Plugin maskitoSelectionChangeHandler accepts callback and invokes it on every change of caret position.

This examples demonstrates how dynamically switch native mobile keyboard to enter different parts of time string: numeric - to enter digit time segments, text – to enter meridiem part (AM / PM).

Use real mobile device to see how it works! 
    
      
    

      
      
    

  
    
      [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 }),
});

Caret Guard

Plugin maskitoCaretGuard is specific instance of maskitoSelectionChangeHandler - it also accepts callback which is triggered on every caret position change. It is used to limit the boundaries for caret position.

Callback should return array with 2 numbers: the first one – caret cannot be placed before this index, the last one – caret cannot be placed after this index.

It can be especially useful for textfields with non-editable affixes.

    
      
    

      
      
    

  
    
      [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 }),
});

Event handlers

Add/remove non-editable prefix on focus/blur is so common task that we even created maskitoAddOnFocusPlugin / maskitoRemoveOnBlurPlugin plugins.

If you need more complex logic for these (or other) events – use maskitoEventHandler . 

    
      
    

      
      
    

  
    
      [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 }),
});

Visualize rejected characters

Plugin maskitoRejectEvent dispatches custom event maskitoReject when a character that the user has entered is rejected by the mask. You can use it to visualize rejection. 
    
      
    

      
      
    

  
    
      [object Object]
    

      
      
    

  
    
      :root {
    --red: 244, 87, 37;
}

@keyframes reject-0 {
    from {
        box-shadow: 0 0 rgba(var(--red), 1);
    }

    to {
        box-shadow: 0 0 1rem rgba(var(--red), 0.12);
    }
}

@keyframes reject-1 {
    from {
        box-shadow: 0 0 rgba(var(--red), 1);
    }

    to {
        box-shadow: 0 0 1rem rgba(var(--red), 0.12);
    }
}

    

      
      
    

  
    
      import './animation.css';

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

import maskitoOptions from './mask';

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

console.info('Call this function when the element is detached from DOM', maskedInput.destroy);