Cleave.js - formatting your input fields on the fly.

#javascript

Cleave.js

I’ve recently come across a nifty JavaScript library called Cleave.js and it formats the user’s input in real-time. It’s great in pure JavaScript but can also be used in React and Angular.

In my day-to-day job I often have customer requirements to validate the user input, have a max length on the input, format currency, things like that. I couldn’t believe how quick it is to implement and want to share it.

First, you include the library in your project, given you have an input that you want formatting, you create a new Cleave instance. The first argument is a String containing the selector you want to target, it can handle the following:

ID selector
Class selector
Data attributes
Name attributes
And more …

The second argument passed in is a configurable object which specifies how you want to format the text. You can specify whether its a credit card number, date, telephone, time or plain numeric.

A usage I have recently implemented is formatting a Portuguese number. There currency format uses periods ‘.’ in place where we would have commas ‘,’ for thousands. E.g. 124.545,00
One traditional way of implementing this would be to use string templates and event listeners on the input but with Cleave.js it’s simply this:

Best thing about Cleave.js is that it’s readable, well-written documentation and very flexible. Another use case would be to format an input and once completed, a continue button appears. Luckily for us, there is a ‘onValueChanged’ callback, this is triggered on input change and can obtain the target value. In here, you could validate the length of the value and show/hide the button for example.

If you ever have to format an input in JavaScript, I would highly recommend investigating this library if it’s suitable for your use. Thank you for reading this post, hope this was helpful.