Cleave.js – A Javascript Library to Format Input Fields

Well-formatted input fields in itself give a unique look and also enhances the user experience to a next level whenever you are a building a new website, web app or a software application. Being a developer myself@ Webliska Technologies, I have to use, style and customize input fields for nearly every customer and client project we make. With the help of Input Fields,  I mean to say fields like Phone numbers, Credit cards, Date, Numeral etc fields.

Cleave.js – A new javascript library that automatically formats your <input/> contents when you are typing.

cleave.js

Sounds interesting… Yes the JS library has the capability to automatically format input fields and lays a professional format to all the fields as per the pre-defined international format.

Cleave.js is open source and free vanilla JavaScript plugin that is very lightweight and reduces the burden of developers from writing expressions and cumbersome code to format input text field.

Know More:

Learn to Code Online in 2017 With These 10 Websites

Let’s learn more about Cleave.js:

How to use Cleave.js?

If you’re really looking out for the code to format input fields as per standards then here’s your destination. The JS plugin will make your day.

First Download the JS plugin files from the GitHub Repository.

Include the files in your web page and that’s it.

Now moving forward let’s see how to code the JS plugin.

Phone Number Formatting:

The HTML structure:

The Javascript Code:

This will format the input field of the phone number and place a decent layout when the user is typing the phone number as per country.

Cleave.js phone number format

Note: Replace country with ISO ALPHA-2 Code i.e. (United States – US, India – IN, United Kingdom – UK etc.)

Credit Card Number Formatting:

The HTML Structure:

The Javascript Code:

Cleave.js credit card formatting

Recommended Readings:

Date Formatting:

You can also format the date field as per the standards using Cleave.js JS plugin.

Note: You can on your own change the pattern of the date as per your choice just replace the Y, m, d.

Moving further:

Cleave.js Custom Options/Formatting:

With Cleave.js you can also lay your custom format to display the input fields. Let’s see how:

In Custom options of Cleave.js, you can also add Prefix before your input field. Let’s see how:

You can also check out the demo of Cleave.js below:
Now it’s your time to write your own code and format all your input fields as per the standard. With proper formatting, you can also double up the user interface as well as user experience.

Cleave.js is really very easy and valuable JS plugin that will lay a superb impression on your clients and users.

If you want to read the official docs of Cleave.js then you can visit the official website.

(Visited 137 times, 1 visits today)
Share is Caring...!

Leave a Reply