CODEWITHSUNDEEP
actionscript-3textareaflex4textinputflex-spark
bon_t
bon_t

Reputation: 97

How to cancel editing in Halo/Spark TextInput and TextArea components

I am using Flex 4, ActionScript 3.

In the AdvancedDataGrid component, when you are in Edit mode in a cell, you can hit the Escape key to cancel editing (i.e. return to the previous value in the cell).

I had expected the same behaviour while in Edit mode in both the Halo and Spark TextInput and TextArea components, and was surprised to find out that this is not the case.

I looked at the attributes of all four components to see if this is something that I need to configure, but couldn't find anything.

Is this something that needs to be coded?

Upvotes: 4

Views: 932

Answers (1)

Jason Towne
Jason Towne

Reputation: 8050

Yes, this is something that will have to be coded. Here's the approach I would take:

  1. Create a custom component that extends the TextInput. Let's call it UndoTextInput.
  2. Add a new variable to UndoTextInput to store the original text of the TextInput. We'll call it originalText.
  3. Add an event listener on the focusIn event. In the focusIn event handler, store the current text value in the originalText variable.
  4. Add an event on the focusOut event. In the focusOut event, set the value of originalText back to an empty String.
  5. Add an event listener on the keyDown event. In the event listener, check to see if the Escape (Keyboard.ESCAPE) key was pressed. If it was, reset the text back to what was stored in originalText.

I hope this helps!

UPDATE:

Here's a quick example on how to do this using an Actionscript class. Feel free to modify as needed.

package
{
    import flash.events.FocusEvent;
    import flash.events.KeyboardEvent;
    import flash.ui.Keyboard;

    import spark.components.TextInput;

    public class UndoTextInput extends TextInput
    {
        private var originalText:String = "";

        public function UndoTextInput()
        {
            super();
            this.addEventListener(FocusEvent.FOCUS_IN, focusInEventHandler);
            this.addEventListener(FocusEvent.FOCUS_OUT, focusOutEventHandler);
            this.addEventListener(KeyboardEvent.KEY_DOWN, checkKeyPress);
        }

        protected function focusOutEventHandler(event:FocusEvent):void
        {
            this.originalText = "";
        }

        protected function focusInEventHandler(event:FocusEvent):void
        {
            this.originalText = this.text;
        }

        protected function checkKeyPress(event:KeyboardEvent):void
        {
            if (event.keyCode == Keyboard.ESCAPE)
            {
                event.stopImmediatePropagation();
                this.text = this.originalText;
            }
        }
    }
}

Upvotes: 3

Related Questions