Dynamic character counter in JavaScript

For a new textbook on JavaScript programming I wrote a small function to count the characters in a textarea (or another input element). The function displays the characters left (max. characters minus characters used) in a corresponding span element – just like Twitter does when writing a tweet.

The function showCharacterCount has three parameters.

  1. The textarea (or input element) to be counted, on which the keyup event must be bound. This way, the function will update the number of characters left on every keystroke.
  2. The span element which will contain the number of characters left. Contrary to common practice, this argument must be a DOM object and not a string referring to the id of an object. Although other ways of doing this are available, this way satisfies the purpose of the example in the textbook the best. The reasons for this are consistency in argument handling and predictability.
  3. The maximum number of characters allowed in the textarea (optional). If this argument (integer) is not supplied, it will be set to the default of 150 characters.

The code (HTML, CSS, JavaScript) is supplied below. You can find a working example of the code here: http://www.reuneker.nl/files/code/character-counter/index.html.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Character counter</title>
		<style type="text/css">
			*, body {
				font-family: Arial, sans-serif;
				font-size: 1em;
			}
			h1 {
				font-size: 2em;
			}
			textarea {
				width: 80%;
				min-width: 400px;
				max-width: 600px;
			}
			label {
				display: block;
			}
		</style>
		<script type="text/javascript">
			//count the characters in a textarea and write maxLength minus the number of characters to the corresponding span section
			function showCharacterCount(textarea, span, maxLength) {
				if (maxLength === undefined) { //if maxLength parameter is not defined, set it to 150
    				var maxLength = 150;
    			}
				var messageLength = textarea.value.length; //get length of textarea value
				span.innerHTML = maxLength - messageLength; //write to the span's innerHTML the result of maxLength - messageLength
				return True; //not entirely necessary, but good practice
				}
			window.onload=function(){ //on the onload event...
				document.getElementById("message").onkeyup = function() { //add keyup event listener to a textarea
					showCharacterCount(this, document.getElementById(this.id+'Counter'), 140); //and on the event, call function showCharacterCount using arguments textarea (DOM object), message span (DOM object), and an (optional) max. number of characters (integer). If last argument is not provided, the function defaults to 150 characters.
				};
			};
		</script>
	</head>
	<body>
		<h1>Character counter</h1>
		<form action="#" method="get">
			<label for="message">Message</label>
			<textarea name="message" id="message" placeholder="You message in max. 140 characters..."></textarea>
			<p id="messageCounter">140</p>
		</form>
	</body>
</html>

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *