Web Design, Web Development and Graphic Tips

This blog or web log is my diary of working with people on the internet and creating their web sites for them. The problems, the ideas, the innovations Ive come across and what Ive created to help people get their products or message or services in front of those customers or clients. You might not agree with some of my methods but they do work... Read on my friend read on

Thursday, April 17, 2008

Limiting characters in a text area

OK we all know that sometimes we have to get user input on our websites like on our contact forms or on our blogs. Usually we provide a simple text area for them to enter their message or data. but lets say we want to limit how much they can enter... Well with textareas unlike textbox which can have a maxlength attribute set, textareas dont have this available to them. For one of my client sites where the user is able to add their site link and provide a site description we wanted to limit the number of characters to 255 I mean cmon if you cant write a solid description of your site in 255 characters why bother?

So I started googling and I came across the standard bloated javascript methods of limiting the number of characters in a text field that also used a non elegant input textbox (disabled) to show how many characters you had left. I wasnt impressed.

So I googled some more and came across NineDaysBlog by Terri Ann and she has created a very light weight charcount.js for use with the prototype javascript library. Terri's nifty little charcount is simple and effective and works in Firefox, IE6, IE7 and safari. (possibly more but I havent tested anything else yet)

Implementation of Terri's little script is very easy and takes about 5 minutes
simply download her js file the prototype file and upload them to your host and add the calls for the 2 files in the head of your page(s) then simply name and id your textarea "txtdesc" or modify her js file to match the name of your current textarea's name and id.

to download the file and view her demo or visit her blog here

Again I cant express how Impressed I was with the simplicity and elegance of this script. its a simple thing but works beautifuly and without alot of bloat.

well Done Terri Well Done

1 comment:

Anonymous said...

Glad to see you enjoyed it :)