Displaying a Label control’s text as a password

The following example shows you how you create a custom Label control in Flex that masks its text as a password by setting the Label control’s nested protected UITextField control’s displayAsPassword property.

Full code after the jump.

View MXML

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

    <mx:HBox>
        <mx:Label text="Password:" />
        <local:MyLabel id="lbl"
                text="The quick brown fox jumped over the lazy dog."
                truncateToFit="true"
                width="100"
                creationComplete="lbl.tf.displayAsPassword = true;" />
    </mx:HBox>

</mx:Application>

View MyLabel.mxml

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/27/displaying-a-label-controls-text-as-a-password/ -->
<mx:Label xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
            import mx.core.IUITextField;

            public function get tf():IUITextField {
                return textField;
            }
        ]]>
    </mx:Script>

</mx:Label>

View source is enabled in the following example.

As you can see, the Label control’s text is masked, but rolling over the label displays the masked text, because the truncateToFit property is set to true.

Note that the truncated Label text does not display the traditional ellipsis (“…”) indicating that the text has been truncated. That is because the ellipsis is also displayed as password text (masked as “*”).

Tagged as: displayAsPassword, textField, truncateToFit