Javascript Dynamic Textarea Counter and Trimmer

One for the coders out there… everyone else: move along!

I recently wanted a way of dynamically counting/trimming user-inputted text in a form field via javascript. Being lazy, I decided to copy someone else’s code. Google threw me several solutions, but none were quite what I wanted. Here’s my solution…

The code that was closest to what I wanted can be found here which puts the character count in a rather ugly read-only input box (unless you then go to great lengths to style the box to be hidden, but that’s a pain).

A nicer solution is to dynamically change some text on the page via innerHTML. For a complete working example, grab the code below and save to a local file on your computer to play with,

<html> 
<head> 
<title>Javascript Dynamic Textarea Counter 
and Trimmer</title> 
<SCRIPT LANGUAGE="JavaScript"> 
function count(field,maxchar) { 
if (field.value.length > maxchar) { 
field.value = field.value.substring(0, maxchar);}} 
</script> 
</head> 
<body> 
<b>Javascript Dynamic Textarea Counter 
and Trimmer</b><br><br> 
<form name="Form1"> 
Enter text (max 128 characters):<br> 
<textarea name="txt1" cols="50" rows="3" 
onkeyup="count(document.Form1.txt1,128); 
document.getElementById('cnt1').innerHTML=(128 - 
this.value.length);"></textarea> 
<span id="cnt1">128</span> left<br><br> 
Enter text (max 256 characters):<br> 
<textarea name="txt2" cols="50" rows="6" 
onkeyup="count(document.Form1.txt2,256); 
document.getElementById('cnt2').innerHTML=(256 - 
this.value.length);"></textarea> 
<span id="cnt2">256</span> left<br><br> 
</form> 
</body> 
</html>

As you’ll see, the javascript trim function can handle multiple input fields with different counts per field (as in Nannette Thacker’s version at ASP Warrior). Any text over the max character count is auto trimmed.

Incidentally, displaying code in a WordPress blog is simple IF you follow these steps…
1. Use the Visual Rich Editor and enter/paste your code
2. Switch to the Code Editor – this rewrites < and > as &lt; and &gt;
3. Wrap the code in <code> and <pre> tags

Enjoy!

About Chris
A self confessed geek, meteorologist (aka weather forecaster), father & proud kiwi mainlander living, working & playing in Wellington, New Zealand.

6 Responses to Javascript Dynamic Textarea Counter and Trimmer

  1. JT... says:

    Nice work but not completely fool proof. You can right click and paste which is not caught by the character counter. I’ve been looking for a solution to this for the past 30 mins and not found anything yet 😦

  2. Chris says:

    True. In that case you could try adding an “onmouseup” event to catch it, but that might not work either as the mouseup would come before the paste action… Hmmm. Tricky. Good luck in your search!

  3. Bill Dwight says:

    I’ve seen an implementation that catches the paste via the “onchange” event. Seems to work well…

  4. Chris Bowyer says:

    Great stuff! Just what I was looking for 🙂

  5. Ulysses says:

    Thank you. This is exactly what I was looking for. Super!

  6. yycgeek says:

    Nice work, but the copy/paste capture works for me. All you have to do after paste add a space and the count captures it. Good Job…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: