HTML and CSS Reference
In-Depth Information
Notice how is used to retrieve the ID of <textarea> and is used
to retrieve the ID of <span> . These IDs are stored in two variables ( id and counterid ) for later use. The val()
method returns the text entered in the <textarea> and is stored in another local variable ( text ). Depending
on the type of counter ( Remaining or Total ), the code checks the length of the text data entered in the
<textarea> against the MaxLength value. If Type is Remaining , the check is performed as follows:
diff = - $(id).val().length;
if (diff < 0) {
else {
If the difference between the length of the text and MaxLength is less than 0, it indicates that the text
has exceeded its maximum allowed length. In that case, you should display the counter with the
WarningCss class. To do this, you first remove the NormalCss class using the removeClass() method and then
apply the WarningCss class using the addClass() method. If the difference is greater than 0, you should
apply the NormalCss class by removing the WarningCss class.
If the counter Type is Total , the CSS classes are applied as shown here:
diff = $(id).val().length;
if (diff > {
else {
If the length of the text entered is more than the MaxLength value, the NormalCss class is removed using
the removeCss() method and the WarningCss class is applied using addClass() . Otherwise, WarningCss is
removed and NormalCss is applied.
Finally, after the code performs the length checking based on the Type setting, the counter value is
assigned to the <span> element using the text() method.
If the AllowOverflow setting is false , further text entered by the user is trimmed to the value of
MaxLength using the substring() JavaScript function. The trimmed text is assigned to the <textarea> using
the text() method.
The OnBlur () event-handler function is shown in Listing 2-5.
Listing 2-5. Handling the blur Event
function OnBlur(event) {
var id = "#" +;
The OnBlur() event-handler function simply triggers the keyup event programmatically. This way, even
if the user enters text in the <textarea> using a copy-paste technique (Ctrl+V or a shortcut menu), the
counter still reflects the correct value when the user exits the <textarea> .
Search WWH ::

Custom Search