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.

 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

5 Responses to Displaying a TextInput control’s text as a password in Flex (redux)

  1. Anthony Pickett says:

    hey, do you know how to change the show as password stars to say dots instead?

  2. peterd says:

    Anthony Pickett,

    I am not aware of any API that allows you to choose the character used for the password mask.
    You can submit an enhancement request to the Flash Player team at: http://bugs.adobe.com/flashplayer/

    Peter

  3. Really good example to learn about alert, PopUpManagers class methods.

  4. zenbullets says:

    For iPhone style passwords (where the last character is displayed as you type) see here

  5. ChennaPavan says:

    thank you Peter deHaan, it helped me..