/

With prefix Recipes

On this page

Use prefixes to indicate things like currencies, area / phone country codes and etc.

There are two approaches to add prefix for masked input. Every approach has its own behaviour and requires basic understanding of different core concepts.

By pattern mask expression

This example demonstrates how to create prefix via dynamic pattern mask expression . Dollar symbol is a fixed character, which will be automatically added when user forgets to type it or deleted when user erase all digits. 
    
      
    

      
      
    

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

By postprocessor

This example demonstrates how to create prefix via postprocessor . It provides more flexibility, and you can configure any desired behaviour. You can use built-in maskitoPrefixPostprocessorGenerator or create your own.

Don't forget that mask property should be compatible with a new prefix! 
    
      
    

      
      
    

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