Displaying a TextInput control’s text as a password in Flex

The following example shows you how you can toggle between plain text and text masked as a password by setting the displayAsPassword property on a TextInput control in Flex.

Full code after the jump.

View MXML

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

    <mx:ApplicationControlBar dock="true">
        <mx:CheckBox id="checkBox"
                label="displayAsPassword:"
                labelPlacement="left"
                selected="true"
                change="textInput.displayAsPassword = checkBox.selected;" />
    </mx:ApplicationControlBar>

    <mx:TextInput id="textInput"
            text="password"
            displayAsPassword="true" />

</mx:Application>

View source is enabled in the following example.

Tagged as: displayAsPassword