Textarea Recipes

You can use Maskito with HTMLTextAreaElement too. API is the same as for HTMLInputElement .

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

const element: HTMLTextAreaElement = document.querySelector('textarea')!;

const maskedTextarea = new Maskito(element, {
  mask: /^[a-z\s]+$/i,
});

// Call it when the element is detached from DOM
maskedTextarea.destroy();

Learn more in the "Core Concepts" section.

Latin letters and digits

Enter address

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

Maskito