Input masking component for Svelte with simple API and rich customization
This project provides a simple API for masking input fields such as credit card numbers, phone numbers, dates, birthdays, and custom masks. It offers rich customization options to suit different use cases. The project also includes demos that demonstrate its functionality.
To use this project, follow the steps below:
Install the project using npm
or yarn
:
If using npm
, run the following command:
npm install masked-input
If using yarn
, run the following command:
yarn add masked-input
Import the MaskInput
component into your project:
import { MaskInput } from "masked-input";
Use the MaskInput
component in your code:
For example, to create a masked input for a credit card number:
<MaskInput mask="0000-0000-0000-0000" />
Add event listeners as needed.
Congratulations! You have successfully created your first masked input.
For more use cases and examples, refer to the demos.
This project provides an easy-to-use API for creating masked input fields. It supports various types of input such as credit card numbers, phone numbers, dates, birthdays, and custom masks. The project offers rich customization options with props to control the input value, default value, mask string, mask character, mask format, and more. With its flexibility and simplicity, the masked-input project is a valuable tool for developers needing masked input functionality in their web applications.