Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 userexperience 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.
Auto-Formatting Input Text with Cleave.js
Let's try to create a similar 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
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> <link rel="stylesheet" href="style.css"> </head> <body> </body> </html>
This is a very simple boilerplate HTML code. In this code, step by step we will start to add our changes, the first being able to make use of Cleave.js and for that, we need to use its CDN links.
Make sure that you add the following code snippet inside the <body> tag of your index.html file.
<script src="https://cdnjs.cloudflare.com/ajax/libs/cleave.js/1.6.0/cleave.min.js"></script>
In the above <script> tag, we are importing the main "cleave.min.js" file that contains all the core logic of Cleave.js that we would require when we are creating its class instance.
style.css
One more thing before we create the instance of the Cleave library is to add the style.css file in our project. Consider the style.css shown below.
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%;
}
This style.css won't change through the examples that we will have and hence you can just save it and focus on the index.html file from now onwards.
Cleave Class Instance
In the next step, let's focus on the Cleave class instance for our credit-card example. The first step is to create a div inside which we will create another div of class named credit-card.
Consider the code snippet shown below.
<div id="main">
<div class="form">
<input class="credit-card" type="text" placeholder="Enter your Credit Card Number" />
</div>
</div>
We need to place this div just after we open the <body> tag in our index.html code.
The next step is to create the <script> tag inside which we will make use of this input tag, and then add the auto-formatting methods. Consider the <script> tag shown below.
<script>
new Cleave('.credit-card', {
creditCard: true,
creditCardStrictMode: true,
delimiter: '-'
});
</script>
The <script> tag needs to be placed after the CDN link that we had above. Consider the updated code of index.html shown below.
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>
<link rel="stylesheet" href="style.css">
</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>
The most important bit about the above code is the <script> tag that is present just before the closing of the <body> tag. Inside the <script> tag, we are creating an instance of the Cleave() class and then the first thing we pass is the name of the input class.
Then we are passing an object, in which we have three different properties, i.e., creditCard set to True, with the second being creditCardStrictMode set to True as well, and finally a delimiter, whose value will be used as a separator between the values of the card number.
If you run the HTML code in the browser, you will get an input field which will accept different formats based on the different credit card distributors that are out there.
Auto-Formatting a Phone Number Using Cleave.js
In the next step, let's focus on creating a new Cleave class instance but this time, for a phone number and not a credit card.
Before we do that, we need to add a CDN link for the respective Cleave country number, and since I am based in India, I will use "cleave-phone.in.js". Feel free to use your country's "cleave.phone.{country}.js".
Add the following CDN link just after the "cleave.min.js" CDN in the index.html code.
<script src="https://cdnjs.cloudflare.com/ajax/libs/cleave.js/1.6.0/addons/cleave-phone.in.js"></script>
The first step in order to do that is to create another <input> tag inside the div that has a class of form. Consider the code snippet shown below.
<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>
We need to place this div just after we open the <body> tag in the index.html code.
The next step is to create the <script> tag inside which we will use this input tag, and then add the auto-formatting methods. We already had one <script> tag that was used for credit-card class; we need to add one for mobile-number class.
Consider the <script> tag shown below.
<script>
new Cleave('.credit-card', {
creditCard: true,
creditCardStrictMode: true,
delimiter: '-'
});
new Cleave('.mobile-number', {
phone: true,
phoneRegionCode: 'IN',
prefix: '+91'
});
</script>
The <script> tag shown above needs to be placed after the CDN link that we had above. See the updated index.html code shown below.
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>
<link rel="stylesheet" href="style.css">
</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 most important bit about the above code is the <script> tag that is present just before the closing of the <body> tag inside which we are creating an instance of the Cleave() class.
Then the first thing we pass is the name of the input class and then we are passing an object, in which we have three different properties, i.e., date set to True, with the second being datePattern set to ['m','d','y'], and finally a delimiter whose value will be used as a separator between the values of the date.
If you run the HTML code in the browser, you will get an input field which will accept the date values with the delimiter separating the values.
Conclusion
In this tutorial, we used multiple examples to show how you can use Cleave.js to auto-format input text content.
395 Views
To Continue Learning Please Login