Flex 3: Keeping focus on a textbox when clicking a button

Question

Quick background. I have a series of editable text areas in which I want to be able to add a variable on the click of a button.

If I click the button the textarea loses focus and so I cant code which textarea I need to add the variable into. Can anyone think of a way of keeping focus on the textbox, inserting the variable and then allowing the user to carry on typing.

I'm not sure if this is part or fully possible but any help would be much appreciated. I've been playing around with the setFocus function trying to get this to work with no success.

Here is a snippet of my code:

public function addFirstName(myText:string):void{
    myText = myText + "<<firstname>>";
}

<mx:TextArea id="txt1" change="text1=txt1.text" text="{text3}" editable="true"/>
<mx:TextArea id="txt2" change="text2=txt2.text" text="{text2}" editable="true"/>
<mx:Button label="Insert First Name" click="addFirstName(focusedtextarea)"/>

its the focusedtextarea part Im stuck on

Thanks in advance!

Answer 1

Write some code using the focus out event to store which text area needs to be changed. Conceptually something like this:

var textAreaToBeChanged : TextArea;

protected function onTextAreaLoseFocus(event:FocusEvent):void{
 // I'm pretty sure Target is the right property to use here; but didn't test
 textAreaToBeChanged = target;
}

Later in your MXML, add the event listener.:

<mx:TextArea id="txt1" change="text1=txt1.text" text="{text3}" editable="true" focusOut="{onTextAreaLoseFocus(event)}"/>
<mx:TextArea id="txt2" change="text2=txt2.text" text="{text2}" editable="true" focusOut="{onTextAreaLoseFocus(event)}"/>

Answer 2

Sorted!

public var textAreaToBeChanged : Object;
public var textposition:int

        //when leaving focus on a textbox, record the textarea and text position. If a button is clicked to add a variable, it needs to be added at this position
        protected function onTextAreaLoseFocus(event:FocusEvent):void{
            textAreaToBeChanged = event.target;
            textposition = textAreaToBeChanged.caretIndex;  
        }

        //split the text from the recent textbox at the position the cursor has just been. The restructure the text with the firstname variable in the middle.
        public function addFirstName():void{
            var firstbit:String = textAreaToBeChanged.text.substr(0,textposition);
            var myString:String = firstbit;

            myString = myString + firstnameVar;

            var lastbit:String = textAreaToBeChanged.text.substr(textposition);
            myString = myString + lastbit;
            textAreaToBeChanged.text = myString;
            //set the focus back to the textarea.
            textAreaToBeChanged.setFocus();
            //place the cursor after the variable we just added.
            textAreaToBeChanged.setSelection(textposition + firstnameVar.length, textposition + firstnameVar.length);
        }

and the MXML:

<mx:TextArea id="txt1" change="text1=txt1.text" text="{text3}" editable="true" focusOut="{onTextAreaLoseFocus(event)}"/>
<mx:TextArea id="txt2" change="text2=txt2.text" text="{text2}" editable="true" focusOut="{onTextAreaLoseFocus(event)}"/>
<mx:Button label="Insert First Name" click="addFirstName()"/>