JQuery_ Novice to Ninja - Earle Castledine [98]
Maximum Length Indicator
Our client wants to limit the feedback form content field to 130 characters. “Like Twitter?” you ask. “Why would you want to do that?” He rambles off a spiel about targeted feedback and attention span and … but we know he just wants to copy Twitter. The “remaining characters” count is another feature making a comeback these days, though the idea of setting a limit on the length of input is as old as computers themselves.
By displaying the remaining characters next to the form field, users have clear expectations of how much they can type.
We’ll set a class of maxlength on the textarea we want to target with this effect. Then, in our script, we append a span after it and add a new kind of event handler:
chapter_07/06_max_length_indicator/script.js (excerpt)
$('.maxlength')
.after("")
.next()
.hide()
.end()
.keypress(function(e) {
// handle key presses;
});
After we append the span, the textarea is still the selected element. We want to modify the new span, so we move to it with the next action. Then we hide the span, but now we need to go back to our form element to add an event handler, so we use the end action. The end action moves the jQuery selection back to where it was before the last time you changed it. In our example, hide doesn’t change the selection, but next does. So when we call end, the selection moves back to the state it was in before we called next.
Now that we’re back on the form element, we attach a keypress event handler. As you might expect, this event fires whenever a key is pressed. Here we can check whether another character is still allowed—and prevent the user from adding more characters if it’s not:
chapter_07/06_max_length_indicator/script.js (excerpt)
var current = $(this).val().length;
if (current >= 130) {
if (e.which != 0 && e.which != 8) {
e.preventDefault();
}
}
Now comes the meat of the effect: we grab the value of the element and use the JavaScript length property to give us its length. If the current number of characters is greater than the maximum length, we’ll prevent the key press from registering by using the preventDefault action of the event.
When handling a keypress event, the event has a which property corresponding to the ASCII code of the key pressed. Note that we’ve allowed the delete (ASCII code 0) and backspace (ASCII code 8) keys to function regardless of the number of characters. If we didn’t do this, the user could paste in a response that exceeded the limit—yet be unable to delete any characters to make it fit:
chapter_07/06_max_length_indicator/script.js (excerpt)
$(this).next().show().text(130 - current);
The last task to do is display the number of remaining characters in the span we created. We move to the next element, make sure it’s visible, and display the results of our simple calculation to indicate how many more characters are allowed.
Form Hints
A nice trick to decrease the amount of space a form takes up on the page is to move the label for a form field inside the input itself. When users move their focus to the field, the label magically vanishes, allowing them to start typing. If they leave the field empty and move away, the original label text appears back in its place.
This technique is only appropriate for short and simple forms. In larger forms, it’s too easy for users to lose track of what each particular field is for in the absence of visible labels. This can be a problem if they need to revisit or change values they’ve already entered.
That said, for simple forms like login or search forms, where most users are very familiar with what each field is for, it can be a great way to save space and streamline your interface. Looking at Figure 7.2, you could probably come up with a good guess of how to implement the effect yourself. The only tricky part is how to return the default value to the input when the user moves on without entering anything into it.
Figure 7.2. Form hints
If you guessed that we’d do it using the data action, you’d be correct. We’ll store the default value