Cleave.js - Custom Formatting for Your Input Field Data

Written by Kevin Liew on 05 Sep 2016
52,979 Views • Javascript

In some cases, you might want to format the data entered by the user in the text field according to a certain specification. Formatting a data is not just a visual decoration but it can be an accessibility feature where it helps user to convey the data immediately.

For example, currency. 1000000 will be easier to read if it's written as 1000,000. Another example would be credit card number - 1234123412341234. It will be easy to spot any typo mistake if it's written as 1234 1234 1234 1234.

Here we have an utility Javascript plugin called Cleave.js. Cleave.js can format the following data for you:

  • Credit card number - with card detection (VISA, Master, Diners, Discover, AMEX and JCB)
  • Phone number - Country code and phone number
  • Date
  • Numeral
  • And cutom options where you can separate number in blocks, add delimiter and prefix.

It also packaged as ReactJS component as well.


Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.