You have probably already seen that feature in the comment section of an online journal, in a guestbook, or a shoutbox: The number of characters you are allowed to use for your message is limited. It could be quite frustrating to see that your message has been truncated so that only the first few sentences of your well-elaborated treatise will appear on the page after you submitted your entry. This is why many websites provide this feature: You are told how many characters you are allowed to use for your entry and the number of remaining characters is continuously updated and displayed. For contributors who ignore this limitation, the text will be truncated immediately if its length exceeds the allowed number of characters.

So, this is what we will do in this section: A simple HTML textarea element will be linked to some JavaScript code (using the jQuery framework) in order to implement the above-mentioned functions.

The first thing to do is setting up the HTML elements, i.e., the text box as well as an input field that will contain the current number of remaining characters (I will omit the rest of the HTML form elements in this example):

In the first few code lines we simply used a standard format for the installation of a web page, that means, we defined the DOCTYPE (here as the version XHTML 1.0), the charset, and the basic html and head elements. Within the head block, we already implemented the jQuery file (in its compressed version) that we will need for the next step (you will have to modify the path to that file, of course).

So, what we have so far is a textarea and a simple input field. However, in its present incarnation the textarea allows you to insert text of unlimited length and the input field has no specific purpose at all. So let's JavaScript step in and establish order. The IDs I used for the two HTML elements (myTextArea and CharsLeft) will be used as selectors to call these elements with jQuery. We have to add another code block right after the link to the jQuery file within the head section:

This code is embedded within script tags, telling your browser that the following lines shall be interpreted as JavaScript code (as stated in the type attribute). Our JavaScript functions and variable declarations are encapsulated in another JavaScript/jQuery function: $(document).ready(function(){}) that will tell your browser to load the functions within it as soon as the DOM of the web page has been established (see Karl Swedberg's introduction to this function here).

The first code line of this block defines a variable called maxchars that represents the maximum number of characters that can be used for a message – you may change that value, of course. The next line calls our input field and tells it to display this value by changing the content of the value attribute of this input element.

The next code section represents a function that is linked to our textarea element (called with $('#myTextArea')) and will always be executed when a key or a mouse event has taken place here. We use the method bind() in order to pass a list of events that will call this function.

The variable curchars in the first line within our function represents the current content of the textarea element that is evaluated by means of the .val() method. In the next line we define the variable leftchars that is the difference between maxchars and the length of the current string within the textarea (curchars.length). This value is used for an if-condition in the next part: If the length of the current string in the textarea exceeds the allowed number of characters, i.e., if the value of the variable leftchars is equal or lower than 0, the following code will be executed:

The textarea element will be called and its current content will be replaced with the truncated string that has the maximum number of characters. This will be done again by changing the value attribute of this element [attr('value', ...)]. As content of this attribute we pass a substring of the original string that starts with the first character (at the string position 0) and contains maxchars characters (100 in this example). This is the way our truncation function works. The next line sets the value leftchars on 0 because this is the result of what we did before: Providing a substring of the original content of the text box that has exactly the maximum number of characters (otherwise we would have negative values that wouldn't make any sense).

The last code line is outside of the if-condition block because it shall be executed every time a change in the text box has taken place (not only in case the string exceeds the maximum number of characters). Here we simply update the value of the input field that displays the number of remaining characters. That's it! If you want to see this function in action, you can play around a bit with the comment box below where I implemented this code (but please: do not submit any nonsense ;)).

© 2011 G. Wendt