Saturday, December 10, 2011

Flex: Jump to next field using the Focus Manager

The following example shows you how to use the FocusManager and how to set the focus to a TextInput using the setFocus() method.

In this example you can fill you birthday (MM/DD/YYYY) and the focus will jump to the next field automatically.

Listing 1
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="" 
               xmlns:mx="library://" width="500" height="100">
            public function checkLengthAndFocus(event:TextOperationEvent):void              
                if( == "month" && event.currentTarget.text.length == 2 )
                    focusManager.setFocus( day );
                if( == "day" && event.currentTarget.text.length == 2)
                    focusManager.setFocus( year );  
    <s:VGroup width="100%" height="100%" horizontalAlign="center" paddingBottom="5" 
              paddingLeft="5" paddingRight="5" paddingTop="20" >
        <s:Label text="Fill in your birthday (MM/DD/YYYY)" />
        <s:HGroup width="100%" height="100%" verticalAlign="middle" horizontalAlign="center"> 
            <s:TextInput id="month" width="23" change="checkLengthAndFocus(event)" />
            <s:TextInput id="day" width="23" change="checkLengthAndFocus(event)" />
            <s:TextInput id="year" width="46" maxChars="4" />