按下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
}