/

ContentEditable Recipes

Source code

On this page

You can use Maskito with contentEditable too!

Setup

Just wrap the element with maskitoAdaptContentEditable utility and use Maskito in the same way as HTMLInputElement / HTMLTextAreaElement .

No need to use maskitoAdaptContentEditable if you use @maskito/angular , @maskito/react or @maskito/vue with the default element predicate (it will be wrapped automatically).

Learn more in the "Core Concepts" section. 

    
      import {Maskito, maskitoAdaptContentEditable, MaskitoOptions} from '@maskito/core';

const maskitoOptions: MaskitoOptions = {
  mask: /^\d+$/,
};

const element = document.querySelector<HTMLElement>('[contenteditable]')!;

const maskedInput = new Maskito(
  maskitoAdaptContentEditable(element), // <-- This is the only difference
  maskitoOptions,
);

Compatible with @maskito/kit

With built-in Time mask
Meeting time: 12:00
    
      
    

      
      
    

  
    
      [object Object]
    

      
      
    

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

import maskitoOptions from './mask';

const element = document.querySelector<HTMLElement>('[contenteditable]')!;

const maskedInput = new Maskito(maskitoAdaptContentEditable(element), maskitoOptions);

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

Multi-line support

Use white-space: pre for multi-line mode
Enter message:

Hello, world! How are you today? Read description of this example!

    
      
    

      
      
    

  
    
      [object Object]
    

      
      
    

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

import maskitoOptions from './mask';

const element = document.querySelector<HTMLElement>('[contenteditable]')!;

const maskedInput = new Maskito(maskitoAdaptContentEditable(element), maskitoOptions);

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