Overview of jQuery - HTML5 Programming for ASP.NET Developers - page 42

Table 2-3. Configuration Settings Passed via the eventData Object

Option Description

AllowOverlow

This setting governs the behavior of the <textarea> if the length of the text exceeds the
MaxLength value. If you set AllowOverlow to true , you can enter text even if the length
exceeds MaxLength ; otherwise you can't enter any further text after MaxLength is reached.

CounterId CounterId indicates the ID of an HTML element (typically a <span> or <div> ) that is

displaying the character counter.

MaxLength

This setting indicates the maximum number of characters that can be entered in the
<textarea> .

NormalCss NormalCss is a CSS class that is applied to the counter element when the length of the text

entered is less than MaxLength .

Type

You can display the character counter in two ways: show the total number of characters
entered so far, or show the number of characters that can still be entered. If you pass
Total , the former setting is used; if you pass Remaining , the latter setting is used.

WarningCss

When the length of the text entered in the <textarea> exceeds MaxLength , the character
counter is displayed with a CSS class indicated by WarningCss .

The code then selects the <textarea> element. Notice the jQuery way of selecting an element based on
its ID: you need to pass the ID of an element prefixed with the # character. The keyup and blur events of
<textarea> are wired to the OnKeyUp and OnBlur event-handler functions, respectively. You write these
event-handler functions shortly. Notice that the code also passes the eventData object while wiring the
event handlers. Then the code programmatically triggers the keyup event of the <textarea> by calling the
keyup() function. This causes the counter <span> element to display the initial character count.
The event handler for the click event of the Submit button is wired using a different syntax. Instead of
creating a separate function and then attaching it as an event handler, the code creates an anonymous
event handler (also known as inline function ) function. The event-handler function takes a parameter
(event) that is automatically passed when the click event is raised. The click event handler of the Submit
button asks the user whether to submit the form. If the user decides to cancel the form submission, the
click event is cancelled using the preventDefault() method of the event object.
The event-handler function OnKeyUp () is shown in Listing 2-4.

Listing 2-4. Handling the keyup Event
function OnKeyUp(event) {
var id = "#" + event.target.id;
var counterid = "#" + event.data.CounterId;
var text = $(id).val();
if (text.length > event.data.MaxLength) {
if (!event.data.AllowOverflow) {
$(id).text(text.substring(0, event.data.MaxLength));
}
}
var diff = 0;
if (event.data.Type == 'Remaining') {
...
}
else {
... }
$(counterid).text(diff);
}