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



npm install --save cleave.js


bower install --save cleave.js



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

Leave A Reply

Your email address will not be published.