Mask input with simple API and rich customization.
You often have to create input for a credit card, phone number, birthday, etc. Each of this usecases requires to input value with some formatting (for example 0000-0000-000-0000 for credit card).
This project could help you in all this situations!
Watch demo: http://xnimorz.github.io/masked-input/
How to start
If you need to create a credit card input, phone, date or similar use (inside the link you'll find step-by-step guide)
- react-maskinput for React,
- svelte-mask-input for Svelte
- mask-input if you don't use any framework
These projects support rich customization.
If you need to create a number formatter:
- react-numberinput for React
Components
- svelte-mask-input — Svelte mask input;
- react-maskinput — react masked input;
- react-numberinput — react numeric input;
- mask-input — vanilla mask input;
- input-core — the core module with rich and clear API on top of which you can build any custom components.
React components and input-core is written on TypeScript, so it helps you to use them.
Contributing
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature - Commit your changes:
git commit -m 'Add some feature' - Push to the branch:
git push origin my-new-feature - Submit a pull request
F.A.Q
- Browsers support
React masked input and numeric input were tested on desktop and mobile browsers:
- Desktop browsers:
- Safari >= 9
- Google Chrome
- EDGE, IE11
- Mozilla Firefox
- Opera, Yandex.browser etc.
- Mobile browsers:
- Android Chrome
- Safari IOS >= 9
- [] Android browser <= v4 — there are some artifacts with copy & paste
License
MIT