Create a Character Limit Textarea using HTML CSS and JavaScript
Last Updated :
01 Aug, 2024
In this article, we will create a Character Limit Textarea using HTML, CSS, and JavaScript.
In this application, we will display the text area as an input component to the user and there is a predefined limit set to accept the input. When the limit is been crossed the user will get the alert message and he will not be able to type further in the text area. The overall structure of the application is developed using HTML tags, and styling of the application is done through CSS classes and properties. The entire validation and handling of user input is done through JavaScript language.
Preview of final output: Let us have a look at how the final application will look like.
Prerequisites
Approach to create Character Limiter
- Create the text area field as an input for the user using the <textarea> tag. Also, there are two <p> tags to display the current character count value and the remaining character count value.
- Style the entire application with attractive and interactive colors, motions, fading, etc. effects using CSS classes and properties.
- In JavaScript, we store the reference of HTML elements like textarea, total-container, etc. All these are stored in the variables.
- There is a user-defined function named 'updateCount()' that is mainly used to calculate and update the character count and also the remaining character count based on the correct text entered in the text areas by the user.
- Then, there are event Listeners to listen for the input chnages in the text area. The updateCount() function is called when the event is been triggered.
- If the character limit is been exceeded then, we are displaying the alert message to the user.
Example: This example describes the basic implementation of the Character Limit application using HTML, CSS, and Javascript.
HTML
<!--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>Character Limit</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>GeeksforGeeks</h1>
<h3>
Character Limit using HTML
CSS and JavaScript
</h3>
<textarea class="textarea"
id="textarea"
placeholder="text here..."
maxlength="50">
</textarea>
<div class="counter-container">
<p>Total characters:
<span class="total-container"
id="total-container">
0
</span>
</p>
<p>
Remaining characters:
<span class="remaining-container"
id="remaining-container">
50
</span>
</p>
</div>
<button class="configure-button"
id="configure-button">
Configure Character Limit
</button>
</div>
<div class="modal" id="myModal">
<div class="modal-content">
<span class="close">×</span>
<h2>Configure Character Limit</h2>
<label for="new-limit">
New Limit:
</label>
<input type="number"
id="new-limit"
value="50">
<button class="apply-limit-button"
id="apply-limit-button">
Apply
</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
/*Styles.css*/
@import url(
"https://fonts.googleapis.com/css2?family=Gloock&display=swap"
);
body {
margin: 0;
padding: 0;
box-sizing: border-box;
height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #c8f8fa;
font-family: "Gloock", serif;
}
.container {
background-color: #fff;
width: 400px;
padding: 20px;
margin: 20px;
border-radius: 10px;
border: 2px solid #000;
box-shadow: 0 0 10px
rgba(0, 0, 0, 0.2);
text-align: center;
position: relative;
overflow: hidden;
transition: background-color 0.3s;
}
.container:hover {
background-color: #f8f8f8;
}
.modal {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px; /* Adjust the width as needed */
background-color: rgba(
0,
0,
0,
0.7
);
z-index: 1;
align-items: center;
justify-content: center;
border-radius: 10px;
}
.modal-content {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px
rgba(0, 0, 0, 0.2);
text-align: center;
}
.close {
position: absolute;
top: 10px;
right: 10px;
font-size: 24px;
cursor: pointer;
}
h2 {
color: #333;
font-size: 24px;
}
label {
font-size: 18px;
margin-right: 10px;
}
input[type="number"] {
width: 50px;
padding: 5px;
font-size: 18px;
border: 2px solid #000;
border-radius: 5px;
}
.apply-limit-button {
background-color: #008000;
color: #fff;
padding: 10px 20px;
font-size: 18px;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 10px;
}
.apply-limit-button:hover {
background-color: #006400;
}
h1 {
color: #008000;
font-size: 36px;
margin: 0;
transition: color 0.3s;
}
h1:hover {
color: #ff0000;
}
h3 {
color: #333;
font-size: 18px;
margin-top: 5px;
}
textarea {
resize: none;
width: 100%;
height: 100px;
padding: 10px;
border: 2px solid #000;
font-family: serif;
font-size: 18px;
box-sizing: border-box;
background-color: #f1f1f2;
margin-top: 10px;
transition: border-color 0.3s,
background-color 0.3s;
}
textarea:focus {
border-color: #1726fa;
background-color: #f8f8f8;
}
.counter-container {
display: flex;
justify-content: space-between;
margin-top: 10px;
font-size: 18px;
color: #333;
transition: color 0.3s;
}
.counter-container:hover {
color: #006400;
}
.total-container {
color: #008000;
transition: color 0.3s;
}
.total-container:hover {
color: #006400;
}
.remaining-container {
color: #ff0000;
transition: color 0.3s;
}
.remaining-container.limit-exceeded {
color: #f00;
animation: shake 0.5s;
}
@keyframes shake {
0%,
100% {
transform: translateX(0);
}
10%,
30%,
50%,
70%,
90% {
transform: translateX(-5px);
}
20%,
40%,
60%,
80% {
transform: translateX(5px);
}
}
.configure-button {
background-color: #fd5a5a;
color: #fff;
padding: 10px 20px;
font-size: 18px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.configure-button:hover {
background-color: #006400;
}
.error-container {
color: #f00;
font-size: 16px;
margin-top: 10px;
display: none;
animation: fade 0.5s;
}
@keyframes fade {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
color: #ff0000;
}
h3 {
color: #333;
font-size: 18px;
margin-top: 5px;
}
textarea {
resize: none;
width: 100%;
height: 100px;
padding: 10px;
border: 2px solid #000;
font-family: serif;
font-size: 18px;
box-sizing: border-box;
background-color: #f1f1f2;
margin-top: 10px;
transition: border-color 0.3s,
background-color 0.3s;
}
textarea:focus {
border-color: #1726fa;
background-color: #f8f8f8;
}
.counter-container {
display: flex;
justify-content: space-between;
margin-top: 10px;
font-size: 18px;
color: #333;
transition: color 0.3s;
}
.counter-container:hover {
color: #006400;
}
.total-container {
color: #008000;
transition: color 0.3s;
}
.total-container:hover {
color: #006400;
}
.remaining-container {
color: #ff0000;
transition: color 0.3s;
}
.remaining-container.limit-exceeded {
color: #f00;
animation: shake 0.5s;
}
@keyframes shake {
0%,
100% {
transform: translateX(0);
}
10%,
30%,
50%,
70%,
90% {
transform: translateX(-5px);
}
20%,
40%,
60%,
80% {
transform: translateX(5px);
}
}
.configure-button {
background-color: #fd5a5a;
color: #fff;
padding: 10px 20px;
font-size: 18px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.configure-button:hover {
background-color: #006400;
}
.error-container {
color: #f00;
font-size: 16px;
margin-top: 10px;
display: none;
animation: fade 0.5s;
}
@keyframes fade {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
// Script.js
let area =
document.getElementById("textarea");
let totalChar = document.getElementById(
"total-container"
);
let remChar = document.getElementById(
"remaining-container"
);
let configureButton =
document.getElementById(
"configure-button"
);
let modal =
document.getElementById("myModal");
let closeButton =
document.getElementsByClassName(
"close"
)[0];
let applyButton =
document.getElementById(
"apply-limit-button"
);
let newLimitInput =
document.getElementById(
"new-limit"
);
let maxLength = 50;
updateCount();
area.addEventListener("input", () => {
updateCount();
});
area.addEventListener(
"keydown",
(event) => {
let textLength =
area.value.length;
if (
textLength >= maxLength &&
event.key !== "Backspace"
) {
event.preventDefault();
remChar.classList.add(
"limit-exceeded"
);
alert(
"Character Limit Exceeded"
);
} else {
remChar.classList.remove(
"limit-exceeded"
);
}
}
);
configureButton.addEventListener(
"click",
() => {
newLimitInput.value = maxLength;
modal.style.display = "block";
}
);
closeButton.addEventListener(
"click",
() => {
modal.style.display = "none";
}
);
applyButton.addEventListener(
"click",
() => {
const newLimit = parseInt(
newLimitInput.value,
10
);
if (!isNaN(newLimit)) {
maxLength = newLimit;
modal.style.display =
"none";
area.maxLength = maxLength;
updateCount();
}
}
);
window.addEventListener(
"click",
(event) => {
if (event.target === modal) {
modal.style.display =
"none";
}
}
);
function updateCount() {
let length = area.value.length;
totalChar.textContent = length;
remChar.textContent =
maxLength - length;
}
Step to run the application: Open live server and search local host URL in your browser
http://localhost:5500/
Output:
Similar Reads
Word and Character Counter using HTML CSS and JavaScript Word and Character Counter is a web application used to count words and characters in a textarea field. HTML, CSS, and JavaScript is used to design the Word and Character Counter. In the textarea field, the user can write anything and this application shows how many words are added by the user and h
4 min read
Create a Contact Form using HTML CSS & JavaScript A contact form is a web form used to collect user information and messages, facilitating communication between visitors and site owners. It is essential for feedback, inquiries, and support. Create a contact form using HTML for structure, CSS for styling, and JavaScript for validation and submission
3 min read
How to create auto-resize textarea using JavaScript/jQuery ? Creating an auto-resize textarea using JavaScript or jQuery means dynamically adjusting the height of the textarea to fit its content as the user types. This enhances user experience by preventing the need for scrolling within the textarea, ensuring all content is visible.Table of ContentUsing JavaS
3 min read
JavaScript - How to Change the Content of a <Textarea> ? Here are the various methods to change the content of a textarea using JavaScript.1. Using value PropertyThe value property is the most common method to change or retrieve the content of a <textarea>.HTML<textarea id="myTextarea">Initial content</textarea> <button onclick="chang
2 min read
How to make Live Coding Editor using HTML CSS and JavaScript ? In this article, we will implement a live coding editor using HTML, CSS, and JavaScript. This project will allow you to write and execute HTML, CSS, and JavaScript code in real-time, making it an excellent tool for learning and testing your code snippets.Final OutputPrerequisiteHTMLCSSJavaScriptAppr
3 min read
How to Disable Textarea using JavaScript? This article will show you how to disable the textarea using JavaScript. Disabling a textarea using JavaScript can be done by setting the disabled property of the textarea element to true. This prevents the user from editing the content of the textarea. There are some reasons to use disabled textare
2 min read
How to change the shape of a textarea using JavaScript ? In General, Textarea will be in the form of rectangular or square shapes, but here we will deal with Unusual shapes of textarea which means this textarea will not be regular shapes but editable. Method 1: In the first method, let's see the irregular editable textarea created using CSS-shapes and con
2 min read
How to make a word count in textarea using JavaScript ? Counting words may be useful in scenarios where the user is recommended to enter a certain number of words and the word counter can keep track of the same. Below are approaches to make a word count in textarea using JavaScript:Table of Content Calculating the number of spaces present in the textSepa
4 min read
How to create a multiline input control text area in HTML5 ? The HTML <textarea> tag is used to specify a multiline input control text area in HTML5. Â The <cols> and <rows> attributes specify size of a textarea. Syntax <textarea rows="" cols=""> Contents... </textarea> The <textarea> tag contains 5 attributes that are liste
1 min read
Build a Virtual Keyboard using HTML CSS & JavaScript In this article, we will build a virtual keyboard using HTML, CSS, and JavaScript. A virtual keyboard is a user interface component that allows users to input text by clicking on the keys displayed on the screen. Our keyboard will support standard alphanumeric characters, special characters, and a C
4 min read