Question

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

您可以在此处获得截图的链接： Screenshot

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

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

没问题。

问题是我还希望用户能够继续向购物车添加商品，而无需点击“添加到购物车”按钮。因此，我添加了代码来处理TextInput的enter事件，方法是调用由“Add to cart”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"/>

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>

我认为问题是组合Label，TextInput和Button -called NewItem 的组件没有获得焦点，尽管TextInput控件确实如此。

因此，在将焦点设置为TextInput控件之前，我只是添加了对 this.SetFocus 的调用，将焦点设置为NewItem组件。

NewItem 的工作版本的源代码是这样的（查找//解决方案评论以查找更改）：

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

如何在输入后将焦点和光标保持在Flex的TextInput中？

3 个答案: