As a web designer, somewhere along the way, you have come to a site with a TextArea, and even though it notes the maximum number of characters for the textbox you’re about to type in, you never really know how many characters are left as you type, because there’s nothing visual showing you. I’ve used something like this in WebForms, so I assume it will also work for MVC, as well as pure HTML.

Instead of going into a long tutorial on how to do it, and just giving you clippings, this time, it’s a clip – but it’s the markup for a whole html web page. (Keep in mind, I made some tags, etc. break up into 2 lines, to keep it all within the CSS for this site.) 

<!DOCTYPE HTML>
<html>
	<head>
		<title>
			Text Area Characters Left
		</title>
	<style>
	body {font-family:calibri;}
	#counter {background-color: #e0e0e0;}
	.overlimit{
		color: red;   
		font-weight: bold;  
		}
	</style>	
	<script type="text/javascript" 
		src="scripts/jquery-1.7.2.js">
	</script>
	<script type="text/javascript">
	
	$(function () {
	   var charactersLeft = 150
	    $("#counter").text("Characters left: " + 
			charactersLeft);	 
	        $("#myTextArea").keyup(function () { 
	        charactersLeft = 150 - $(this).val().length;
	        if(charactersLeft < 0){
	            $("#counter").addClass("overlimit");
	        }
	        if(charactersLeft >= 0){
	            $("#counter").removeClass("overlimit");
	        }
	        $("#counter").text("Characters left: " + 
				charactersLeft);
	    });	
	})
	</script>		
	</head>
	<body>
		<div style="width: 51%">
			<textarea id="myTextArea" rows="4" cols="67">
				</textarea>
			<div id="counter"></div>
		</div>	
	</body>
</html>
Twitt