按下Enter键后，如何在Flex的TextInput中保持焦点和光标？

Question

我是Flex新手，正在测试一个模拟购物车的小应用程序。 （它是基于Farata Systems的Yakov Fain的一个很好的示例）。 注意：我正在使用Flash Builder 4的beta版对该应用程序进行编码。

您在这里有屏幕快照的链接： 屏幕快照

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

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

没关系。

问题是我还希望用户能够继续向购物车添加商品，而不必单击“添加到购物车”按钮。 因此，我通过调用“添加到购物车” Click事件触发的同一处理函数，添加了用于处理TextInput的enter事件的代码。

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

在下面，您可以看到代码的相关部分，以及在顶部将三个控件（标签，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"/>

Answer 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>

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

因此，在将焦点设置为TextInput控件之前，我仅向this.SetFocus添加了一个调用，以将焦点设置为NewItem组件。

NewItem工作版本的源代码如下（查找// Solution注释以查找更改）：

<?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>

Answer 2

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

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

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