Convert TextArea into TextField in AS3

Question

I've a TextArea component in my MovieClip. When I double click on it, I want to switch to TextField component, allowing me to change its content. When I click outside, I want to restart its original class (TextArea).

How can I do it?

I'm doing this, but didn't work:

element.addEventListener(MouseEvent.DOUBLE_CLICK, changeName);

private function changeName(e:MouseEvent):void{
   e.target.type = TextFieldType.INPUT;
}

Where element is a TextArea (clasic and dynamic text). Thanks!

EDIT:

This is how my MovieClip looks. "Name" is the TextArea that I want to allow user changes. I'm setting it like this:

[Spanish interface]

1. Nombre de instancia = Instance name (empty)
2. Texto clásico (classic text)
3. Texto dinámico (dynamic text)

The MovieClip is controlling my by own base class (called 'ConfLayer'). Inside it I have this:

public function doStuff(e:MouseEvent):void{
   // element = TextArea 'Name'
   element.addEventListener(MouseEvent.DOUBLE_CLICK, changeName);
}

private function changeName(e:MouseEvent):void {
   var tarea:TextArea = e.target as TextArea;
   var tf:TextField = tarea.TextField;    // this line throwing error
   tf.type = TextFieldType.INPUT;
}

Because AS3 gives me errors, I tried this:

private function changeName(e:MouseEvent):void {
   e.target.TextField.type = TextFieldType.INPUT;
}

When I double-click on TextArea element, the previous string removes and I can't write nothing.

Answer 1

You make field editable only after second click. My idea is that it's to late. the field is editable, but you'll need to click again. So, try to make ediable for a while (e.g. 300 mileseconds) after the first click. If there's no click you set the type back to DYNAMIC. After second click you'll start editing text field.

Answer 2

Following on my comment above, a TextArea has a textfield property.

So you should be able to do something like this:

private function changeName(e:MouseEvent):void{

   var tarea:TextArea = e.target as TextArea;
   var tf:TextField = tarea.textField; //make sure that textfield is camelCase!!!
   tf.type = TextFieldType.INPUT;
}

Answer 3

I solved my own problem using background and border properties from TextField. Instead of create TextField directly on my MovieClip, I create it dynamically.

// Field 'Name' of the layer
var tarea:TextField = new TextField();
tarea.text = 'Layer';
tarea.x = -80;
tarea.y = -23;
tarea.type = TextFieldType.DYNAMIC;
tarea.height = 20;

// Format the TextField
var format_tarea:TextFormat = new TextFormat();
format_tarea.font = "Arial";
format_tarea.size = 14;
format_tarea.bold = true;

tarea.setTextFormat(format_tarea,0,tarea.length);

Then, I add it some listeners to allow changes when I click on it:

// Add event to allow name changes
tarea.addEventListener(MouseEvent.CLICK,changeName);

When I press ENTER key, I accept the changes

// Add event to accept changes on press ENTER key
tarea.addEventListener(KeyboardEvent.KEY_DOWN,acceptKeyboardName);

When TextField lost his focus, accept the changes too:

tarea.addEventListener(FocusEvent.FOCUS_OUT,acceptFocusName);

Last, I added to my own MovieClip

// Add to MC
mc.addChild(tarea);

Handlers associated to below events are these:

private function changeName(e:MouseEvent):void
{
    e.target.setSelection(0,e.target.text.length);
    e.target.border = true;
    e.target.background = true;
    e.target.type = TextFieldType.INPUT;
}

private function acceptKeyboardName(e:KeyboardEvent):void
{
    if (e.charCode == 13)   // When pres ENTER, remove border, background and restore dynamic type
    {
        e.target.type = TextFieldType.DYNAMIC;
        e.target.border = false;
        e.target.background = false;
    }
}

private function acceptFocusName(e:FocusEvent):void
{
    // When lost focus, remove border, background and restore dynamic type
    e.target.type = TextFieldType.DYNAMIC;
    e.target.border = false;
    e.target.background = false;
}