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

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