- Techniques to Handle Events
- The First Event: load
- The Event Object
- The Secret Life of Events
- Striped Table with Rollovers
- The Up and Down Life of Keys
- Summary
This chapter is from the book
This chapter is from the book
This chapter is from the book
The Up and Down Life of Keys
It’s easy to have a simplistic view of the keyboard: The user just presses a key and a character appears, right? The reality—JavaScript’s reality, at least—is rather more complex. A keystroke is several discrete events, each with its own event message. When a key is pressed, the sequence of events is as follows:
- keydown is sent when the key makes contact and is immediately followed by keypressed.
keypressed is a general event that summarizes a complete key press/release cycle.
Then the character actually appears at the location of the keyboard’s focus.
keyup occurs when the key breaks contact.
If you hold the key down until it starts to repeat the character, keydown and keypressed repeat as well. (I think it’s wrong for keypressed to repeat here, but it does.)
Generally, I work with keyup or keydown. Which one I use depends on the circumstance. Usually, I’ll use keyup but sometimes keydown when I want to test the character before it appears onscreen. For example, if you have a numbers-only text field, you might use keydown so you can test the character, and reject it without letting it appear in the field if it is not a number.
Text Fields with Character Limits
Those of you who have tried to pack the excitement of what you are doing right now into a 140-character Twitter tweet have encountered a text field with a character limit. As soon as you type that hundred-and-forty-first character, the Update button dims and you can’t send your tweet. Ahhhh, now the world will never know all the tasty details of that bologna sandwich!
Limiting text input can help ensure you are getting correctly sized data (U.S. zip codes and phone numbers for example) and compel those who would rant via your site to at least organize their thoughts.
I’ll demonstrate how to set character limits on fields with a textarea (multiline) text field, as shown in Figure 4.18.
)
Figure 4.18 This is the finished example. A display below the text area shows how many more characters the field will accept.
For this example, I’ve limited the field to 20 characters, but this can easily be changed.
The strategy for designing such a control is simple.
- Each time the user types a character in the field, count the total number of characters in the field.
- Update an onscreen display so users can see how many characters they still have left to type.
- If the limit is reached, highlight the onscreen display to warn the user and delete any characters over the limit.
- If the user deletes characters to reduce the text to below the maximum, remove the warning highlight.
This layout requires some simple HTML and CSS, which you can see in the download file. The only HTML that interacts with the JavaScript code is the text area and the display text.
<textarea id="msg_field" cols="35" rows="3"></textarea> <p id="display"></p>
The p tag is currently empty, but I will add text into it as I go along. The initial code file, text_field_max_chars1.html, is displayed in the browser in Figure 4.19.
)
Figure 4.19 The initial markup for the text field displayed in the browser.
Setting Up the Message Display
Here’s a start to the code.
Code 4.17. text_field_max_chars2.html
In this first step I set up theMaxChars property to specify the character count limit (highlighted) and define the setup method, which is called when the page loads. For now, this method simply passes a text string stating the character limit to the displayMsg helper function (also highlighted), which then updates the display with the text string, as shown in Figure 4.20.
)
Figure 4.20 The display now indicates the 20-character limit defined by theMaxChars property.
The next step gets the text the user types in the field so I can determine how many characters have been typed. To do this, I’ll set an event listener on the field that calls its function on keyup events; in other words, the function will be called every time the user types a character into the field.
Code 4.18. table_stripe__roll3.html
There is nothing here you haven’t seen in earlier examples in this chapter. In the first block of the preceding highlighted code, I get the message field and then add an event listener to it that calls the checkField function whenever the keyup event occurs. To test that this arrangement is working, I’ll have the checkField function display the user text in the display area (second highlighted code block). You can see this happening in Figure 4.21.
)
Figure 4.21 The keyup event successfully triggers a function that, for now, simply shows the text in the display area below.
Every time the user types a character, the text in the text field immediately appears in the display area below. Capturing the text every time a character is added is crucial to the functionality I am creating here.
Monitoring the Character Count
Now it’s time to do something more useful with this capability than to simply display the text—let’s add some real functionality to the checkField method.
Code 4.19. text_field_max_chars4.html
I’ve removed the test display code and replaced it with a piece of code that deletes any characters in the field that exceed the number defined by theMaxChars property—20.
To do this, I use a String object method substring, which returns part of a string—known as the substring. The substring method accepts two parameters: the index of the first character to be returned and the length of the substring.
The highlighted line states “return a 20-character substring of the text in theText object starting from index 0 (the first character), and then set the contents of theField to that text.”
This code is a sort of circular reference: The text is being read from the field in which the user is typing, trimmed to the first 20 characters, and put back into the same field. When there are less than 20 characters in the field, this has no visible effect. Once the user exceeds 20 characters, however, the effect is that the twenty-first and subsequent characters are deleted as fast as the user types them.
It’s impossible to show this effect in a static screenshot, but if you open text_field_max_chars4.html in your browser and start typing, you’re 20 characters away from seeing it for yourself.
While this achieves the objective of limiting the amount of text that can be typed in the field, it’s not a very nice user experience to simply delete the user’s text without giving some kind of warning. To help the user understand the rules of the field, let’s first create a countdown in the display that states how many characters can still be typed.
Code 4.20. text_field_max_chars5.html
There is actually no point in updating the text in the field until the user exceeds the character limit, so I’ve added an if statement to control when the field is updated. Once the limit is exceeded, I’ll trim the text. As long as the character count is below the maximum allowed, I’ll update the message below the field to read “x of y characters left.” Figure 4.22 shows that the user is still below the 20-character limit.
)
Figure 4.22 Now there is a countdown display that shows how many more characters can be typed.
As a finishing touch, when the limit is exceeded, I’ll make the display text bold and bright red. I’ll add this one line to the CSS.
Code 4.21. text_field_max_chars6.html
div#sign_up #display.hilite {color:red; font-weight:bold;}
Then I’ll add the hilite class onto the display element when the limit is reached, as shown in Figure 4.23, and remove it if the user deletes enough text to get back below the limit again.
)
Figure 4.23 The display text now highlights when the character limit is exceeded.
The Finished Code
Here’s the complete code for this example with the two additional lines of JavaScript.
That completes this example and this chapter.