Flex Examples

We’ve already seen how to get a TextInput control to display its text as a masked password field before in an earlier example, “Displaying a TextInput control’s text as a password in Flex” by setting the displayAsPassword property to true.
The following example will show you how you can listen for the focusIn and focusOut events to toggle the displayAsPassword property so that when the password field has focus the text is displayed as plain text, and when the password field does not have focus the text is displayed as masked text.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/27/displaying-a-textinput-controls-text-as-a-password-in-flex-redux/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.managers.PopUpManager;

            private var alert:Alert;

            private function submit_click():void {
                alert = Alert.show("Closing in 3 seconds.",
                                    "Submitting...");
                setTimeout(closeAlert, 3000);
            }

            private function reset_click():void {
                alert = Alert.show("Closing in 1 second.",
                                    "Resetting...");
                username.text = "";
                password.text = "";
                setTimeout(closeAlert, 1000);
            }

            private function closeAlert():void {
                PopUpManager.removePopUp(alert);
            }
        ]]>
    </mx:Script>

    <mx:Panel title="Login">
        <mx:Form>
            <mx:FormItem label="Username:" required="true">
                <mx:TextInput id="username"
                        text="JohnDoe"
                        maxChars="16" />
            </mx:FormItem>
            <mx:FormItem label="Password:" required="true">
                <mx:TextInput id="password"
                        text="p455w0rd"
                        maxChars="16"
                        displayAsPassword="true"
                        focusIn="password.displayAsPassword = false;"
                        focusOut="password.displayAsPassword = true;" />
            </mx:FormItem>
        </mx:Form>
        <mx:ControlBar horizontalAlign="right">
            <mx:Button id="submit"
                    label="Submit"
                    click="submit_click();" />
            <mx:Button id="reset"
                    label="Reset"
                    click="reset_click();" />
        </mx:ControlBar>
    </mx:Panel>

</mx:Application>

View source is enabled in the following example.