In this article you'll learn how to limit input characters using HTML CSS & JavaScript. In this blog post I'll show a simple yet effective way to prevent users from entering too many characters in a text field.
You'll learn in this blog post:
- How to set and display the maximum number of characters that can be entered into an input field or textarea.
- How to prevent users from entering more than the maximum number of characters.
- How to create a live character counter.
- How to show live numbers characters present in textarea or input field.
- Limit input character in textarea by defined limit.
- Show the number of characters present in textarea (live).
- Show the Number of maximum characters that textarea can accept or show the character limit of textarea.
You may have seen an input field or text area, that when you type, simultaneously there is a counter that counts the characters written and there is also the total display limit of input characters that input field or textarea will accept. In this article you’ll learn to build this system using HTML, CSS & JavaScript.
Video Tutorial on Limiting Input Characters in Textarea:
Limit Input Characters.
So, it's easy to make it, we just have to add the maxlength attribute to the text area. That's its character limit successfully settled.
To show the number of input characters in text area and number of maximum character text area can accept based on our maxlength attribute value, we'll used JavaScript. So here below are the steps to show the number of characters present in textarea and total characters textarea can accept.
File structure:
- Create one folder.
- Open it in your code editor.
- Create two files in that folder index.html and index.css.
I’ve integrated javascript within the html file inside the script tag. You can create a separate file and link it to an html file.
We are going to create a this character limit functionality in textarea with just 2 steps.
Step 1: Design a Textarea with Character Limit.
In the first step, we'll create a basic design for the textarea and incorporate a character counter below it. The maxlength attribute is added with a value of 5, limiting the input to 5 characters (including spaces). This establishes the character limit using HTML, but it's not visible to the user.
To address this, we utilise JavaScript to display both the character limit (defined by maxlength="5") and the current number of characters entered in the textarea. This provides users with clear feedback and enhances the user experience.
Remember to add character limit same as you give value to maxlength attribute.
HTML
<!DOCTYPE html>
<html lang="en">
<!-- maketechstuff.com -->
<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>Limit Input Characters | maketechstuff.com</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="box">
<!-- textarea -->
<textarea name="text" id="textarea" maxlength="5"></textarea>
<!-- Character counter box -->
<div class="counter">
<p class="counter_characters">0</p>/<p>5</p>
</div>
</div>
</body>
</html>
CSS
*{
padding: 0;
margin: 0;
}
body{
width: 100%;
height: 100vh;
background: linear-gradient(90deg, #37277b, #934242);
position: relative;
}
.box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
width: 450px;
background-color: #fff;
padding: 30px 20px;
box-shadow: 0px 2px 20px -11px rgb(0 0 0);
}
.box2{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
width: 450px;
background-color: #fff;
padding: 30px 20px;
box-shadow: 0px 2px 20px -11px rgb(0 0 0);
}
#textarea{
width: 100%;
padding: 7px 0px;
font-size: 22px;
}
.counter{
float: right;
display: flex;
font-size: 22px;
}
Output:
Design complete! Next, we'll create functionality to count and display the number of characters entered in the textarea field.
Step 2: Create function for Dynamic Character Counter with JavaScript.
This step focuses on creating a JavaScript function to calculate the number of characters entered within a textarea element. This function will be triggered upon the "input" event, enabling a real-time character count as user type.
You can easily count the characters of textarea by simple javascript code, textarea.value.length. Here textarea is a variable name in which textarea element is stored.
JavaScript
let textarea = document.getElementById('textarea');
let counter_characters = document.querySelector('.counter_characters');
textarea.oninput = function () {
counter_characters.innerText = textarea.value.length;
}
Output:
Creating textarea with characters input limit and displaying the live number of characters present inside textarea is easy with html css and javascript. If you have any questions or suggestions, feel free to leave a comment below.
You may like:
- How to make an character counter with and without space using JavaScript.
- How to create word counter using JavaScript.
- How to create tags input box with tag input limit.
- How to replace multiple spaces between words by single a space using JavaScript.
- Convert textarea text case to upper or lower case using JavaScript.
Share your thoughts.