⚠ī¸ Warning ⚠ī¸ Deprecated Code! This video tutorial contains outdated code.
💡 If you wish to update it, any AI assistant will update the code for you in seconds.

textarea Form Field Character Counting and Limiting

Published : November 17, 2014   •   Last Edited : November 24, 2025   •   Author : Adam Khoury
Learn to use JavaScript to limit and count a text field in your HTML based forms. Show the user how many characters are remaining that they can type into that field. It will limit the amount they can type in real time also. 
<html>
<head>
<script> 
var maxAmount = 250;
function textCounter(textField, showCountField) {
    if (textField.value.length > maxAmount) {
        textField.value = textField.value.substring(0, maxAmount);
	} else { 
        showCountField.value = maxAmount - textField.value.length;
	}
}
</script>
</head>
<body>
<form>
<textarea name="ta" rows="6" style="width:340px;" onKeyDown="textCounter(this.form.ta,this.form.countDisplay);" onKeyUp="textCounter(this.form.ta,this.form.countDisplay);"></textarea>
<br>
<input readonly type="text" name="countDisplay" size="3" maxlength="3" value="250"> Characters Remaining
</form>
</body>
</html>
▲