- Notifications
You must be signed in to change notification settings - Fork10
Input masking component for Svelte with simple API and rich customization
xnimorz/svelte-input-mask
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
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
Install it:
npm install --save svelte-input-maskor if you're using yarn:
yarn add svelte-input-maskImportMaskInput component:
importMaskInputfrom"svelte-input-mask/MaskInput.svelte";
Use it (for example for CreditCard):
<MaskInputalwaysShowMaskmaskChar="_"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 inputif(detail.inputState.maskedValue.indexOf('34')===0||detail.inputState.maskedValue.indexOf('37')===0){mask='0000-000000-00000';return;} mask = '0000-0000-0000-0000';};</script><MaskInputalwaysShowMaskmaskChar="_"{mask}on:change={handleChange}/>
Congrats! You made the first masked input :)
Checkout more usecases here:https://codesandbox.io/s/romantic-franklin-xurgr
Credit cards:
<MaskInputalwaysShowMaskmaskChar="_"mask="0000-000000-00000"/>
Phones (you still can change prefixes, country code like in credit card example):
<MaskInputalwaysShowMaskmask="+1 (000) 000 - 0000"size={20}showMaskmaskChar="_"/>
Dates:
<script> import MaskInput from 'svelte-input-mask/MaskInput.svelte'; let maskString = 'DD.MM.YYYY'; let mask = '00.00.0000'; const handleChange = ({detail}) =>{constvalue=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><MaskInputalwaysShowMask{maskString}{mask}on:change={handleChange}/>
Numbers:
<script> import NumberInput from 'svelte-input-mask/NumberInput.svelte';</script><NumberInput/>
Mask input has next props:
| Prop | Default value | Description |
|---|---|---|
| value | - | The value of the input. Will be processed to masked one. In this case you can control the value of the component |
| defaultValue | - | The default value of the input. Will be applied only during the first render |
| maskString | - | The mask string to show if there are no filled chars. It's length should be the same asmask. Example:'DD.MM.YYYY' |
| maskChar | '' | In case you don't need a custom string you can define only a definite char for mask. Example:maskChar = '_' andmask = '0000-0000-0000-0000' will give:____-____-____-____ |
| mask | - | The mask of the input. Could be a credit card:'0000-0000-0000-0000', date:00.00.0000 or whatever you want :) Doesn't work ifreformat prop is setted |
| maskFormat | regexp | The regexp for custom formatting. You may use it if you want to define a specific mask. See example here:https://github.com/xnimorz/masked-input/blob/master/packages/input-core/src/index.ts#L16-L28 |
| alwaysShowMask | false | Flag to show the mask |
| showMask | false | Show mask if there is any data in input |
| reformat | - | The function, which defines a custom formatting rules. In case if you can't describe the format only with mask (e.g. numbers). If you use this propmask prop will be ignored |
Svelte mask input pass all props that it doesn't handle right toinput html element.
git clone git@github.com:xnimorz/svelte-input-mask.gitcd svelte-input-mask/exampleyarn installyarn devSvelte should be installed in your project. Check the minimal Svelte version here:https://github.com/xnimorz/svelte-input-mask/blob/master/package.json#L42
About
Input masking component for Svelte with simple API and rich customization