Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
svelte-input-mask
Advanced tools
Readme
If you need to create an input for:
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-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
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 />
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 as mask . 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 = '_' and mask = '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 if reformat 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 prop mask prop will be ignored |
Svelte mask input pass all props that it doesn't handle right to input
html element.
git clone git@github.com:xnimorz/svelte-input-mask.git
cd svelte-input-mask/example
yarn install
yarn dev
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
FAQs
Input masking component for Svelte
The npm package svelte-input-mask receives a total of 1,434 weekly downloads. As such, svelte-input-mask popularity was classified as popular.
We found that svelte-input-mask demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.