A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://www.geeksforgeeks.org/html/create-a-character-limit-textarea-using-html-css-and-javascript/ below:

Create a Character Limit Textarea using HTML CSS and JavaScript

Create a Character Limit Textarea using HTML CSS and JavaScript

Last Updated : 23 Jul, 2025

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

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>
CSS
/*Styles.css*/
@import url(
"https://fonts.googleapis.com/css2?family=Gloock&amp;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=&quot;number&quot;] {
    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);
    }
}
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; 
} 

Step to run the application: Open live server and search local host URL in your browser

http://localhost:5500/
Output:

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4