xnimorz / Svelte Input Mask

Mask input with simple API and rich customization.

If you need to create an input for:

• credit card
• phone number
• date
• birthday
• numbers
• Or other custom mask

This project could help you in all this situations!

Take a look at our demos: https://codesandbox.io/s/svelte-input-mask-demo-xurgr

How to use it:

Install it:

npm install --save svelte-input-mask

or if you're using yarn:

yarn add svelte-input-mask

Import MaskInput component:

import MaskInput from "svelte-input-mask/MaskInput.svelte";

Use it (for example for CreditCard):

<MaskInput alwaysShowMask maskChar="_" mask="0000-000000-00000" />

Add event listeners:

<script>
  import MaskInput from 'svelte-input-mask/MaskInput.svelte';

  let mask = '0000-0000-0000-0000';

  const handleChange = ({ detail }) => {
    console.log(detail.inputState.maskedValue); // stores the value of input

    if (detail.inputState.maskedValue.indexOf('34') === 0 || detail.inputState.maskedValue.indexOf('37') === 0) {
      mask = '0000-000000-00000';
      return;
    }

    mask = '0000-0000-0000-0000';
  };
</script>

<MaskInput alwaysShowMask maskChar="_" {mask} on:change={handleChange} />

Congrats! You made the first masked input :)

Checkout more usecases here: https://codesandbox.io/s/romantic-franklin-xurgr

Where to use?

Credit cards:

<MaskInput alwaysShowMask maskChar="_" mask="0000-000000-00000" />

Phones (you still can change prefixes, country code like in credit card example):

<MaskInput
  alwaysShowMask
  mask="+1 (000) 000 - 0000"
  size={20}
  showMask
  maskChar="_"
/>

Dates:

<script>
  import MaskInput from 'svelte-input-mask/MaskInput.svelte';

  let maskString = 'DD.MM.YYYY';
  let mask = '00.00.0000';

  const handleChange = ({ detail }) => {
    const value = detail.inputState.maskedValue;
    if (parseInt(value[6], 10) > 2) {
      maskString = 'DD.MM.YY';
      mask = '00.00.00';
    } else {
      maskString = 'DD.MM.YYYY';
      mask = '00.00.0000';
    }
  };
</script>

<MaskInput alwaysShowMask {maskString} {mask} on:change={handleChange}/>

Numbers:

<script>
  import NumberInput from 'svelte-input-mask/NumberInput.svelte';
</script>

<NumberInput />

Which props it has?

Mask input has next props:

Svelte mask input pass all props that it doesn't handle right to input html element.

Quick start examples at local machine

git clone [email protected]:xnimorz/svelte-input-mask.git
cd svelte-input-mask/example
yarn install
yarn dev

Requirements:

Svelte should be installed in your project. Check the minimal Svelte version here: https://github.com/xnimorz/svelte-input-mask/blob/master/package.json#L42