如何取消 Halo/Spark TextInput 和 TextArea 组件中的编辑

Question

我正在使用 Flex 4、ActionScript 3。

在 AdvancedDataGrid 组件中，当您在单元格中处于编辑模式时，您可以按 Escape 键取消编辑（即返回到单元格中的先前值）。

我原以为 Halo 和 Spark TextInput 和 TextArea 组件在编辑模式下会出现相同的行为，但惊讶地发现事实并非如此。

我查看了所有四个组件的属性，看看这是否是我需要配置的东西，但找不到任何东西。

这是需要编码的东西吗？

Answer 1

是的，这是必须编码的东西。这是我将采取的方法：

1. 创建一个扩展 TextInput 的自定义组件。我们将其称为 UndoTextInput。
2. 向 UndoTextInput 添加一个新变量来存储 TextInput 的原始文本。我们将其称为originalText。
3. 在 focusIn 事件上添加事件侦听器。在 focusIn 事件处理程序中，将当前文本值存储在 originalText 变量中。
4. 在 focusOut 事件上添加一个事件。在 focusOut 事件中，将 originalText 的值设置回空字符串。
5. 在 keyDown 事件上添加事件侦听器。在事件侦听器中，检查是否按下了 Escape (Keyboard.ESCAPE) 键。如果是，请将文本重置回 originalText 中存储的内容。

我希望这有帮助！

更新：

下面是一个关于如何使用 Actionscript 类执行此操作的快速示例。请随意根据需要进行修改。

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;
            }
        }
    }
}