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/

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

• 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.

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -m 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request

1. 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

MIT