The FocusEvent.FOCUS_IN and FocusEvent.FOCUS_OUT events are inherited from InteractiveObject but are particularly relevant to input text elds. These events are broadcast any time that the TextField receives or loses focus from the user, respectively. You can use this to

update the form you started building in Example 17-7, taking the user-friendly prompts and clearing them out when the user focuses the eld, as shown in Example 17-8.

EXAMPLE 17-8

package { import flash.display.Sprite; import flash.events.FocusEvent; import flash.text.TextField; import flash.text.TextFieldType; import flash.text.TextFormat; import flash.utils.Dictionary; public class ch17ex8 extends Sprite { protected const INFMT:TextFormat = new TextFormat("_sans", 12, 0, true); protected const OUTFMT:TextFormat = new TextFormat("_sans", 12, 0x808080, false); protected var prompts:Dictionary; protected var nameTF:TextField; protected var phoneTF:TextField; protected var emailTF:TextField; public function ch17ex8() { prompts = new Dictionary(); nameTF = makeInputTextField(); nameTF.text = "Your name"; nameTF.setTextFormat(OUTFMT); nameTF.maxChars = 40; prompts[nameTF] = nameTF.text; phoneTF = makeInputTextField(); phoneTF.text = "Your phone number"; phoneTF.setTextFormat(OUTFMT); phoneTF.maxChars = 20; phoneTF.restrict = "0-9()\\-"; prompts[phoneTF] = phoneTF.text; emailTF = makeInputTextField(); emailTF.text = "Your email address"; emailTF.setTextFormat(OUTFMT); emailTF.maxChars = 40; emailTF.restrict = "a-zA-Z0-9_\\-+= !@#$%\\^."; prompts[emailTF] = emailTF.text; } protected function onFocusIn(event:FocusEvent):void { var tf:TextField = TextField(event.target); if (tf.text == prompts[tf]) { tf.text = "";

} tf.setTextFormat(INFMT); tf.defaultTextFormat = INFMT; } protected function onFocusOut(event:FocusEvent):void { var tf:TextField = TextField(event.target); if (tf.text == "") { tf.text = prompts[tf]; tf.setTextFormat(OUTFMT); } } protected function makeInputTextField():TextField { var tf:TextField = new TextField(); tf.type = TextFieldType.INPUT; tf.border = true; tf.width = 300; tf.height = 18; tf.y = numChildren * 26; tf.addEventListener(FocusEvent.FOCUS_IN, onFocusIn); tf.addEventListener(FocusEvent.FOCUS_OUT, onFocusOut); addChild(tf); return tf; } } }

The form elds take away the prompts as soon as you tab or click into them; likewise, they restore the prompts if you leave the eld empty. Furthermore, the example uses a different TextFormat for the prompts to better differentiate prompt text and input text.

Two different kinds of events are red when the user modi es the contents of an input TextField, Event.CHANGE and TextEvent.TEXT_INPUT. There are three main differences between these events. First, the TextEvent.TEXT_INPUT event is red when the user types text in the eld, whether that changes the contents of the eld or not. For example, typing illegal characters inside a restricted input eld doesn t change the text because these characters are ignored. However, the TEXT_INPUT event is red. This also means that when the user deletes text with the backspace key or the clipboard, the TEXT_INPUT event is not red. The Event.CHANGE event, on the other hand, is dispatched only when the actual contents have changed, and it doesn t care if that s from typing, deleting, cutting, or pasting. Second, the TEXT_INPUT event is red before the contents of the eld change, whereas the CHANGE event is red after the contents have changed. So when you look at the text property of a TextField while it dispatches a TEXT_INPUT event, it contains the text in that eld immediately prior to the event occurring. During a CHANGE event, the text property is already up-to-date.

Finally, the TEXT_INPUT event tells you what text is about to be added. You can nd this in the text property of the TextEvent. Because it happens before the text is actually added, and it tells you what text is about to be added, you can cancel the event with preventDefault() to prevent the user s text addition from taking place. In other words, by listening to the TEXT_INPUT event, you can gain much ner or context-sensitive control over what goes into a TextField when a user types into it. This could be used to automatically add dashes to license keys or automatically capitalize letters as you type them. If you just want to know when the contents of the TextField have changed, however, Event.CHANGE is a much simpler event to listen to. You can use this to do on-the- y validation of form elds. Example 17-9 adds a Submit button to the form you built in Examples 17-7 and 17-8 and only lets the user click this button when all the elds are correct.

EXAMPLE 17-9