Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Auto-formatting Input Text Content with Cleave.js
Auto-formatting is one of those features that are hard to implement but at the same time increases the user experience a lot. There are different JavaScript libraries that one can use when they want to auto-format the input text content, but the most popular of them is Cleave.js.
Cleave.js is a JavaScript library that is mainly used when we want to format the input text content and it works very smoothly. It is very lightweight and easy to get started with. In this tutorial, we will take a couple of examples to demonstrate how you can use Cleave.js to autoformat input text.
You might have noticed that most of the payment gateway websites contains auto-formatting of the input text content embedded in them. For example, when you enter the details of your credit card, you might have noticed that the numbers get formatted in some particular format while you are entering the values or it might be the case that some delimiter is added on the fly as well.
Getting Started with Cleave.js
Let's try to create a credit card auto-formatting input element. The first step is to create a simple HTML template file. Consider the following index.html file that you can start with.
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Cleave - Formatting Input</title> <link rel="stylesheet" href="style.css"> </head> <body> </body> </html>
This is a very simple boilerplate HTML code. To use Cleave.js, we need to add its CDN link. Add the following script tag inside the <body> tag:
<script src="https://cdnjs.cloudflare.com/ajax/libs/cleave.js/1.6.0/cleave.min.js"></script>
Adding CSS Styles
Before creating the Cleave instance, let's add a style.css file for better presentation:
body {
text-align: center;
margin: 0 auto;
top: 20%;
}
#main {
text-align: center;
margin: auto;
display: flex;
justify-content: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 400px;
height: 200px;
margin: auto;
}
.form > input {
width: 150%;
height: 20%;
margin: 10px 0;
}
Auto-Formatting Credit Card Numbers
Now let's create a credit card formatting example. First, add the HTML structure inside the body tag:
<div id="main">
<div class="form">
<input class="credit-card" type="text" placeholder="Enter your Credit Card Number" />
</div>
</div>
Next, create a Cleave instance with credit card formatting options:
<script>
new Cleave('.credit-card', {
creditCard: true,
creditCardStrictMode: true,
delimiter: '-'
});
</script>
Here's the complete example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cleave - Formatting Input</title>
<style>
body { text-align: center; margin: 0 auto; top: 20%; }
#main { text-align: center; margin: auto; display: flex; justify-content: center; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 400px; height: 200px; margin: auto; }
.form > input { width: 150%; height: 20%; margin: 10px 0; }
</style>
</head>
<body>
<div id="main">
<div class="form">
<input class="credit-card" type="text" placeholder="Enter your Credit Card Number" />
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cleave.js/1.6.0/cleave.min.js"></script>
<script>
new Cleave('.credit-card', {
creditCard: true,
creditCardStrictMode: true,
delimiter: '-'
});
</script>
</body>
</html>
In this example, we create a Cleave instance targeting the '.credit-card' class. The configuration object includes:
- creditCard: true - Enables credit card formatting
- creditCardStrictMode: true - Validates credit card format strictly
- delimiter: '-' - Sets the separator between card number groups
Auto-Formatting Phone Numbers
Let's add phone number formatting. First, include the country-specific phone addon:
<script src="https://cdnjs.cloudflare.com/ajax/libs/cleave.js/1.6.0/addons/cleave-phone.in.js"></script>
Add another input field for the phone number and create a second Cleave instance:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cleave - Formatting Input</title>
<style>
body { text-align: center; margin: 0 auto; top: 20%; }
#main { text-align: center; margin: auto; display: flex; justify-content: center; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 400px; height: 200px; margin: auto; }
.form > input { width: 150%; height: 20%; margin: 10px 0; }
</style>
</head>
<body>
<div id="main">
<div class="form">
<input class="credit-card" type="text" placeholder="Enter your Credit Card Number" />
<input class="mobile-number" type="text" placeholder="Enter your mobile number" />
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cleave.js/1.6.0/cleave.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cleave.js/1.6.0/addons/cleave-phone.in.js"></script>
<script>
new Cleave('.credit-card', {
creditCard: true,
creditCardStrictMode: true,
delimiter: '-'
});
new Cleave('.mobile-number', {
phone: true,
phoneRegionCode: 'IN',
prefix: '+91'
});
</script>
</body>
</html>
The phone number Cleave instance uses these options:
- phone: true - Enables phone number formatting
- phoneRegionCode: 'IN' - Sets the country code (India in this example)
- prefix: '+91' - Adds the country prefix automatically
Configuration Options
| Option | Type | Description |
|---|---|---|
| creditCard | boolean | Enable credit card formatting |
| phone | boolean | Enable phone number formatting |
| delimiter | string | Character used as separator |
| prefix | string | Text added at the beginning |
Conclusion
Cleave.js provides an easy way to implement professional input formatting for credit cards, phone numbers, and other data types. With minimal configuration, you can significantly improve user experience in forms.
972 Views
