As a JavaScripter, form validation is a common task. As you've seen so far, it can be quite challenging. One of the most challenging kinds of validation presents itself in the form of (no pun intended) limiting the number of characters in a textarea.

With text inputs, the HTML attribute "maxlength" is the easiest and most efficient way to limit the number of characters that can be entered. But when it comes to textareas, accomplishing the same task requires a bit of scripting.

Letting the user know just how much of their life story is actually going to be submitted requires us to check the length property of the textarea's value continually. Enter onKeyUp/onKeyDown and onKeyPress event handlers.

Exactly when you want to check the length value will dictate which event handler you'll use to call the length-checking functions.

The onKeyup handler is triggered after a key has been pressed, and after a value has been generated. So if you want to check the length after a value has been generated, use onKeyUp.

The onKeyPress handler is triggered before any value is generated for the key being pressed. So if you want to check the length before a value has been generated, use onKeyPress.

Take a look at the characterLimit() function which monitors the textarea in the first form. This function is called using onKeyPress:

Form One
Key in 10 characters.

function characterLimit() {

var characters = document.formOne.text.value

	if (characters.length <= 9) {
	document.formOne.counter.value = "Remaining characters: " + (9 - characters.length)
	}
	else {
	document.formOne.counter.value = "Over Limit by: " + (characters.length - 9) + " characters"
	}
			
}

Why are we subtracting from 9 instead of 10? Because this function uses the onKeyPress event handler: a value is not generated until the key is released. If we waited until the length was equal to 10, we'd end up with 11 characters in the textarea.

The second function, charAlert(), which is run on the textarea in the second form, informs the user they have entered the max amount via an alert box:

Form Two
Key in 5 characters.

function charAlert() {
var textField = document.formTwo.text

	if(textField.value.length > 5){ 
	/* must be > 5, not == 5 or else the substring statement on the next line 
	will cause the function to run again if the user dismisses the alert
	by pressing the 'enter' key rather than clicking 'OK'. */ 
											
	textField.value= textField.value.substring(0,5) 
	// set field's value equal to first five characters. 
															
	textField.blur() 
	/* move cursor out of form element 
	to keep it from placing itself at position zero, 
	causing an overwrite of the first character */
							 
	alert("No more text can be entered")	
	}

}

There are two issues that are important to note in order for the 2nd function to run properly:
1. The function that chops extra characters from the string is run using onKeyUp.

<textarea name="text" onKeyUp="charAlert()"></textarea>

The charAlert() function contains an alert telling the user "No more text can be entered". If the user presses the "enter" key to dismiss the alert, the code can potentially run again, causing a recurring alert box.

2. The charAt() function re-sets the textarea's value to a definite length using substring.
textField.value= textField.value.substring(0,5)

**Both the alert and substring statements are contained in an if statement that tests the length property each time a key is pressed.
if(textField.value.length > 5){

The length tested for must be anything greater than 5. If it tested for 5 and greater , if(textField.value.length >= 5){, the function would run over and over again. This is because its value is being re-set to 5 characters using substring, qualifying it to run the code inside the if body. Essentially the substring statement in the body of the if will qualify the alert to be run again.

There are various browser shortcomings in terms of handling certain keyboard events such as the delete, enter and backspace keys, not to mention the fact that some Mac browsers don't support the onKeyUp handler. These issues should give you an idea of what to avoid if you need to limit characters. Don't try to perform subtraction when the backspace could be used (NN & IE) unless you are prepared to do some event handling. See next example for handling backspace when counting textarea characters.

You can always grab the exact number of characters you need from strings and send them to a server, or whatever else you need to do with them by using the substring() method.

See the Detecting Backspace Key Press lesson for handling the backspace in a textarea character limiting script.

View the Source