Changing text color in input and ouput field

Hi all,

I have a challenge for you :slight_smile:

I have an input text field in which the user enters text. This text is displayed in an output textfield.
The user should have the option to change the color of a selection, This color should be applied to the selection in both the input and output textfield. After that the user should be able to further edit the text without loosing the fomatting.

But pictures say more than words so…

This is basically my problem/question:

1. The user selects text and sets the color to yellow

2. The text color is set to yellow just like I want :slight_smile:

3. This is the actual issue. When the text (in the input field) is edited all text in the ouput field goes black again :frowning:
That’s not what I want, I want the colored text to stay colored when the input is edited.

This is my code:

txt_Input.addEventListener(KeyboardEvent.KEY_UP, fncOutput)
btn_Format.addEventListener(MouseEvent.CLICK, fncFormat)

var tfmBlack:TextFormat = new TextFormat();
var tfmRed:TextFormat = new TextFormat();
tfmBlack.color = 0x000000; 
tfmRed.color = 0xFFFF00;

function fncFormat(event:MouseEvent):void
{
    if(txt_Input.selectionBeginIndex != txt_Input.selectionEndIndex){
        txt_Output.setTextFormat(tfmRed, txt_Input.selectionBeginIndex, txt_Input.selectionEndIndex)
        txt_Input.setTextFormat(tfmRed, txt_Input.selectionBeginIndex, txt_Input.selectionEndIndex)
    }
}

function fncOutput(event:KeyboardEvent):void
{
    //the magic should happen here I guess :)
    txt_Output.text = txt_Input.text;
}

Can anyone give me some suggestion on how to achieve this ?

Thanks in advance !