按下回车后，如何在 Flex 的 TextInput 中保持焦点和光标？答案

【问题标题】：How can you keep focus and cursor in Flex's TextInput after hitting enter?按下回车后，如何在 Flex 的 TextInput 中保持焦点和光标？
【发布时间】：2009-07-23 08:42:51
【问题描述】：

我是 Flex 新手，我正在测试一个模拟购物车的小应用程序。（它基于 Farata Systems 的 Yakov Fain 的一个很好的样本）。注意：我正在使用 Flash Builder 4 测试版来编写应用程序。

这里有一个截图链接： Screenshot

（抱歉，由于stackoverflow不允许新用户使用图像标签，因此我无法在此处插入屏幕截图的图像。）

应用程序非常简单。您在 TextInput 控件中键入产品，然后单击“添加到购物车”按钮将其添加到由底部的 TextArea 表示的“购物车”。

没问题。

问题是我还希望用户能够继续将商品添加到购物车，而无需单击“添加到购物车”按钮。因此，我添加了代码来处理 TextInput 的 enter 事件，方法是调用由“添加到购物车”Click 事件触发的相同处理函数。

如果您键入一些内容，然后单击“添加到购物车”按钮，TextInput 控件将接收焦点和光标，因此您可以再次键入。但是，如果您按 Enter 键，而不是单击按钮，TextInput 控件将保持焦点，并且您可以看到光标光束，但是您无法输入文本，直到您单击其他位置并返回控件。

您可以在下面看到代码的相关部分，其中定义了将顶部的三个控件（Label、TextInput、Button）分组的组件的定义。

¿有什么建议吗？

<?xml version="1.0" encoding="utf-8"?>

<fx:Script>
    <![CDATA[           
        protected function newItemHandler():void
        {
            import cart.ItemAddedEvent; 
            var e : ItemAddedEvent = new ItemAddedEvent( "->" + textInputItemDescription.text );    
            textInputItemDescription.text = ""; 
            textInputItemDescription.setFocus();
            textInputItemDescription.setSelection(0,0); 
            dispatchEvent( e ); // Bubble to parent = true
            trace( "I just dispatched AddItemEvent " + e.toString() + "\n Content = " + e.itemDescription );
        }
    ]]>
</fx:Script>

<fx:Metadata>
    [Event(name="ItemAddedEvent",type="cart.ItemAddedEvent",bubbles=true)]
</fx:Metadata>
<mx:Label text="Item description:"/>
<s:TextInput id="textInputItemDescription" enter="newItemHandler() "/>
<s:Button click="newItemHandler()"  label="Add to cart"/>

【问题讨论】：

标签： apache-flex actionscript-3 setfocus

【解决方案1】：

首先感谢 dan 的回答。我试过了，还是不行。

但是，丹的帖子为我指明了正确的方向。

首先，为了让您有更好的理解，让我展示一下主要的 mxml 文件 (SimpleCart.mxml)：

<?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/halo" 
               xmlns:ctrl="controls.*"
               xmlns:cart="cart.*"
               minWidth="1024" minHeight="768" >
    <s:layout>
        <s:BasicLayout/>
    </s:layout>
    <fx:Style source="SimpleCart.css"/>
    <ctrl:NewItem id="buttonAddItem" x="9" y="15" width="394" height="27"/>     
    <cart:SmartShoppingCart  x="8" y="47" width="378"/>         
</s:Application>

我认为问题在于将 Label、TextInput 和 Button 分组的组件（称为 NewItem）没有获得焦点，尽管 TextInput 控件获得了焦点。

所以，我只是添加了一个对 this.SetFocus 的调用，将焦点设置到 NewItem 组件，然后再将焦点设置到 TextInput 控件。

NewItem 工作版本的源代码是这样的（查找 //Solution cmets 以找到更改）：

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

    <fx:Script>
        <![CDATA[   

            protected function newItemHandler():void
            {
                import cart.ItemAddedEvent; 
                import flash.external.ExternalInterface; 

                var e : ItemAddedEvent = new ItemAddedEvent( "->" + textInputItemDescription.text );    
                textInputItemDescription.text = "";

                // *** Solution begins here                     
                this.setFocus();
                // *** Solution ends here

                textInputItemDescription.setFocus();
                textInputItemDescription.setSelection(0,0); 
                dispatchEvent( e ); // Bubble to parent = true
            }
        ]]>
    </fx:Script>

    <fx:Metadata>
        [Event(name="ItemAddedEvent",type="cart.ItemAddedEvent",bubbles=true)]
    </fx:Metadata>

    <mx:Label text="Item description:"/>
    <s:TextInput id="textInputItemDescription" enter="newItemHandler() "/>
    <s:Button click="newItemHandler()"  label="Add to cart"/>
</s:HGroup>

【讨论】：

【解决方案2】：

我认为你的问题是一旦你点击输入光标就会返回到 HTML 页面。因此，当播放器在正确的控件周围显示它的焦点矩形时，浏览器又重新获得了光标焦点。一种解决方案是通过调用此处概述的一些简单 javascript 来强制浏览器将播放器控制权交还给玩家：

http://carrythezero.net/blog/2009/01/20/flex-textinput-focus-issues/

【讨论】：

【解决方案3】：

jfc 的回答对我有用。我有一个 Mate ListenerInjector 调用此例程以使用 id="answerText" 将焦点设置在 TextInput 上。如果没有 jfc 建议的this.setFocus()，TextInput 将显示蓝色轮廓，好像它有焦点，但没有光标，并且输入不会出现在那里。

public function readyForNextAnswer(e:Event) : void {
    this.setFocus()
    answerText.setFocus() // Tried focusManager.setFocus(answerText), too
}

【讨论】：