Archive for the 'TextInput' Category

08
Jul

Displaying a border on specific sides of a TextInput control in Flex

The following example shows how you can toggle which sides of a Flex TextInput control display the borderSides and borderStyle styles.

Full code after the jump.

Continue reading ‘Displaying a border on specific sides of a TextInput control in Flex’

24
Jun

Detecting a double click on a TextInput control in Flex

The following example shows how you can detect when a user double clicks a Flex TextInput control using the doubleClick event.

Full code after the jump.

Continue reading ‘Detecting a double click on a TextInput control in Flex’

12
Jun

Rounding specific corners on a focus rectangle in the TextInput control in Flex

The following example shows how you can apply a corner radius to specific corners of a Flex TextInput control’s focus rectangle by setting the focusRoundedCorners style.

Full code after the jump.

Continue reading ‘Rounding specific corners on a focus rectangle in the TextInput control in Flex’

15
May

Restricting which characters a user can type in a TextInput control in Flex

The following example shows how you can restrict which characters a user can enter into a Flex TextInput control by setting the restrict property.

Full code after the jump.

Continue reading ‘Restricting which characters a user can type in a TextInput control in Flex’

12
Apr

Changing the focus rectangle color on a TextInput control in Flex

The following example shows how you can change the focus rectangle color for a Flex TextInput control by setting the themeColor style.

Full code after the jump.

Continue reading ‘Changing the focus rectangle color on a TextInput control in Flex’

28
Jan

Creating a tool tip on a Flex TextInput control with password masked text

The following example shows you how you can use a tool tip on a Flex TextInput control with its displayAsPassword property set to true. By mousing over the credit card number field in the form below, you can see your credit card number in a readable tool tip.

Want the short version? Use a simple binding to bind the tool tip text to the TextInput control’s text, as seen in the following snippet:

<mx:TextInput id="ccNumber"
        text="4111111111111111"
        displayAsPassword="true"
        toolTip="{ccNumber.text}" />

Looking for a longer version? Read on!

Full code after the jump.

Continue reading ‘Creating a tool tip on a Flex TextInput control with password masked text’

27
Jan

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.

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

05
Jan

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.

Continue reading ‘Displaying a TextInput control’s text as a password in Flex’

10
Oct

Changing the background color of a disabled Flex TextInput control

The following example shows how you can use the backgroundDisabledColor style to customize the overlay color on a Flex TextInput control when the control’s enabled property is set to false.

Full code after the jump.

Continue reading ‘Changing the background color of a disabled Flex TextInput control’

17
Sep

Building a simple tip calculator in Flex

The following example shows a very simple (and probably somewhat buggy) tip calculator which I put together in a few minutes using Flex. Nothing really new, but sometimes its fun to combine a few of the things we’ve covered over the past posts and build something a bit more interesting.

Full code after the jump.

Continue reading ‘Building a simple tip calculator in Flex’

01
Sep

Customizing a Flex TextInput control’s error color

The following example shows how you can customize a Flex TextInput control’s error color and error string using the errorColor style and errorString property.

Full code after the jump.

Continue reading ‘Customizing a Flex TextInput control’s error color’

30
Aug

Creating drop shadows on the Flex TextInput control

The following example shows how you can easily create a drop shadow effect on a TextInput control using the dropShadowEnabled style (instead of creating a DropShadowFilter), as well as control the drop shadow effect’s color, direction, and distance (using the dropShadowColor, shadowDirection, and shadowDistance styles, respectively).

Full code after the jump.

Continue reading ‘Creating drop shadows on the Flex TextInput control’