Format Input Content With Cleave.js While Typing
Simple purpose is to help you format input content with Cleave.js while typing. Cleave.js provide an easy way to increase input field readability by formatting your typed data. By using this library, you won’t need to write any mind-blowing regular expressions or mask patterns to format input text.
Main Features
- Credit card number formatting
- Phone number formatting (i18n js lib separated for each country to reduce size)
- Date formatting
- Numeral formatting
- Custom delimiter, prefix and blocks pattern
- CommonJS / AMD mode
- ReactJS component
- AngularJS directive (1.x)
Try DEMO on this page LINK
Installation
npm
npm install --save cleave.js
bower
bower install --save cleave.js
Usage
Simply include
<script src="cleave.min.js"></script>
Then have a text field
<input class="input-phone" type="text"/>
Now in your JavaScript
var cleave = new Cleave('.input-phone', {
phone: true,
phoneRegionCode: '{country}'
});
More tutorials in documentation at GitHub LINK