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)
These projects support rich customization.
If you need to create a number formatter:
- react-numberinput for React
- 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.
- 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
- 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