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.
Javascript
// 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;
} |
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>
|
CSS
/*Styles.css*/@import url(
); 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);
}
} |
Step to run the application: Open live server and search local host URL in your browser
http://localhost:5500/