Svelte.js Tutorial to Take Mask Input Field Values in Forms For Credit Cards Using svelte-input-mask Library

Hello, friend today we are going to see clearly what we are going to see in the article Svelte.js Tutorial to Take Mask Input Field Values in Forms For Credit Cards Using svelte-input-mask Library. We hope you find this article very useful.

Svelte.js Tutorial to Take Mask Input Field Values in Forms For Credit Cards Using svelte-input-mask Library

Svelte.js Tutorial to Take Mask Input Field Values in Forms For Credit Cards Using svelte-input-mask Library

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') ===  || detail.inputState.maskedValue.indexOf('37') === ) {
      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 git@github.com:xnimorz/svelte-input-mask.git
cd svelte-input-mask/example
yarn install
yarn dev

Read Also: Build Svelte.js Multiple Checkboxes Component Library in Browser Using HTML5 & Javascript

Final Thoughts

Svelte.js Tutorial to Take Mask Input Field Values in Forms For Credit Cards Using svelte-input-mask Library We hope you find the article useful and will see you in the next article.

Hi, I'm Ranjith a full-time Blogger, YouTuber, Affiliate Marketer, & founder of Coding Deekshi. Here, I post about programming to help developers.

Share on:

Leave a Comment