27
Jan
08

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

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.


2 Responses to “Displaying a TextInput control's text as a password in Flex (redux)”


  1. 1 Anthony Pickett Sep 30th, 2008 at 9:47 am

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

  2. 2 peterd Sep 30th, 2008 at 10:40 am

    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

Leave a Reply

This blog is terrible at eating HTML tags. If you plan on posting code/XML, please escape your "<" characters as "&lt;" and your ">" characters as "&gt;".