How to Count Characters in Textarea using JavaScript

How to Count Characters in Textarea using JavaScript

How to Count Characters in Textarea using JavaScript


 

 

Introduction & Demo

In this video, I’ll show you how to create a textarea counter in JavaScript!

Demo : Link

You will learn how to
– Count characters.
– Show remaining characters.
– Set maximum length.
– Use Bootstrap.

Enjoy coding 🙂

 
 

Sample Code

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Text Counter</title>
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<style>
		.container {
			width: 500px;
			margin-top: 100px;
			font-size: 18px;
		}
	</style>
</head>
<body>
	<div class="container">
		<form>
			<div class="form-group">
				<label>Count Up</label>
				<textarea class="form-control" rows="5" onkeyup="count_up(this);" maxlength="20"></textarea>
				<span class="text-muted pull-right" id="count1">0</span>
			</div>
			<br><br>
			<div class="form-group">
				<label>Count Down</label>
				<textarea class="form-control" rows="5" onkeyup="count_down(this);"></textarea>
				<span class="text-muted pull-right" id="count2">30</span>
			</div>
		</form>
	</div>
	
	<script>
		function count_up(obj) {
			document.getElementById('count1').innerHTML = obj.value.length;
		}
	
		function count_down(obj) {
			
			var element = document.getElementById('count2');
			
			element.innerHTML = 30 - obj.value.length;
			
			if (30 - obj.value.length < 0) {
				element.style.color = 'red';
			
			} else {
				element.style.color = 'grey';
			}
			
		}
	
	</script>
</body>
</html>

 
 

References

Bootstrap: https://getbootstrap.com/docs/3.3/getting-started/

 

About Sara

Working as a freelance programmer in Japan. I'll try to make coding as simple as possible. Hope you enjoy coding 🙂