How to confirm text input in Flex actionscript

Question

What TextInput event can I listen for to throw an Alert when a number is entered? The scenario is : a user enters a number into myTxt1. An Alert appears that says "Are you sure you want to enter that number?". If the user clicks Yes, do nothing/continue. If the user clicks No, leave focus on myTxt1 so he can change the number.

Problem is, I don't know what event to listen to to throw the Alert. I've tried valueCommit and focusOut. With both of these, the alert shows, but when the user clicks Yes, focus remains on myTxt1, even if the event was triggered by the user clicking on myTxt2. User tries to leave myTxt1, but sees the ALert, clicks Yes, focus remains on myTxt1, and it's a vicious cycle.

This seems like a simple issue, but I can't figure it out. Any advice?

Answer 1

If you are trying to prevent user from entering numbers or otherwise consider using restrict property. But if you just want user to be notified for entering number, you may use change event.

Answer 2

In your focusOut handler you have to store the object that is going to get the focus. That's because when you show an Alert this information is gone since the Alert window now gets the focus. See the following example on how to do it properly. I'd suggest you build your own custom component that does all the work for you...

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx">

    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.events.CloseEvent;
            import mx.managers.FocusManager;

            protected var previousValue:String;
            protected var nextValue:String;
            protected var focusInObject:InteractiveObject;

            protected function isNumber(value:String):Boolean
            {
                // do your check
                return true;
            }

            protected function textInput_focusOutHandler(event:FocusEvent):void
            {
                var value:String = TextInput(event.currentTarget).text;

                if (!isNumber(value) || value == previousValue)
                    return;

                nextValue = value;
                focusInObject = event.relatedObject;
                Alert.show("Are you sure you want to enter that number?", "", Alert.YES | Alert.NO, this, alertCloseHandler);
            }

            protected function alertCloseHandler(event:CloseEvent):void
            {
                if (event.detail == Alert.NO)
                    return;

                previousValue = nextValue;

                if (focusInObject)
                    systemManager.stage.focus = focusInObject;
            }
        ]]>
    </fx:Script>

    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

    <s:TextInput focusOut="textInput_focusOutHandler(event)"/>

    <s:CheckBox label="Foo"/>
    <s:Button label="Bar"/>
</s:Application>

I've included a small optimization. The application remembers the value if the user presses Yes. In case you get another focusOut event and the value hasn't changed since last time then the Alert won't be shown.

Answer 3

You can listen for the change event if its a TextArea component. If there is any change in the text area then a change event will be fired. You can then check which key is pressed.