Maskfy 3 - Mask Simple

Install

npm i maskfy

// or

yarn add maskfy

Usage

import { maskfy } from 'maskfy';
import { useState } from 'react';

...

const [stateValue, setStateValue] = useState('')

...

const handleInput = (e) => {
  const { value } = e.currentTarget;
  const valueWithMask = maskfy(value, { mask: '(99) 9999-9999' });
  setStateValue(valueWithMask);
}

...

<input name="phone" value={stateValue} onInput={handleInput} />

Vue

import { ref } from 'vue';
import { maskfy } from 'maskfy';

...

const stateValue = ref('');
const handleInput = (e: Event) => {
  const { value } = e.target as HTMLInputElement;
  const valueWithMask = maskfy(value, { mask: '(99) 9999-9999' });
  stateValue.value = valueWithMask;
}

...

<template>
  <input name="phone" maxlength="15" :value="stateValue" @input="handleInput" />
</template>

Angular

import { Component } from '@angular/core';
import { maskfy } from 'maskfy';

...

@Component({ selector: 'app-root', templateUrl: './app.component.html' });

...

export class AppComponent {
  stateValue: string = '';

  handleInput(event: Event): void {
    const input = event.target as HTMLInputElement;
    const valueWithMask = maskfy(input.value, { mask: '(99) 9999-9999' });
    this.stateValue = valueWithMask;
  }
}

...

<input name="phone" maxlength="15" [value]="stateValue" (input)="handleInput($event)" />

import { maskfy } from 'maskfy';

const valueMask = maskfy(e.target.value, { mask: '(99) 9999-9999' });
console.log(valueMask);

const { maskfy } = require('maskfy');

const valueMask = maskfy(valueInput, { mask: '(99) 9999-9999' });
console.log(valueMask);

<script src="./dist/amd/index.js"></script>
<script>
  const valueMask = window.Maskfy.maskfy(valueInput, { mask: '(99) 9999-9999' });
  console.log(valueMask);
</script>

<input id="phone" />

...

<script type="module">
  import { maskfy } from 'https://cdn.jsdelivr.net/gh/figuarnieri/maskfy@master/dist/esm/index.js'

  document.querySelector('#phone').addEventListener('input', (e) => {
    const valueMask = maskfy(e.target.value, { mask: '(99) 9999-9999' });
    e.target.value = valueMask.toUpperCase();
  });
</script>

Syntax

maskfy(value);
maskfy(value, options);

Parameters

value

String to which the mask will be applied

options ^optional

Object used to configure the mask

Name	Type	Default	Description
mask	string	'999.999.999.999'	String for mask implementation
reverse	boolean	false	Applies the mask with character reversal. Commonly used for price formatting
keybind	{   [key: String]: RegExp }	{   mask: '999.999.999.999,99',   reverse: true,   keybind: {     A: /[A-Za-z]/,     9: /\d/,     '?': /./,   },   prefix: 'US$ ',   suffix: ' %' }	Object for implementing character patterns of a mask
prefix	string	''	Prefix applied to the masked value
suffix	string	''	Suffix applied to the masked value

Usage

maskfy(value, {
  mask: '999.999.999.999,99',
  reverse: true,
  keybind: {
    e: /\d/,
  },
  prefix: 'US$ ',
  suffix: ' %',
});

Examples

Coming soon

• Add plugin to handle input elements with data-* attributes
• Add formatBefore and formatAfter options

Source

Github | npm

License

The MIT License
created by Filipe Guarnieri