Flex/TextArea: Inserting tabs?

Question

I've a TextArea that I want to use for code input (xml). How do I allow for entering tabs (pressing tab moves focus to nect control)?

Answer 1

The only way I've found to do this is the extend TextArea and catch it's keyFocusChange event, then stop the event and insert the tab. Here is an example:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*">

  <mx:Component className="MyTextArea">
    <mx:TextArea width="300" height="300">
      <mx:keyFocusChange>
        event.preventDefault();
        this.textField.replaceSelectedText("\t");
      </mx:keyFocusChange>
    </mx:TextArea>
  </mx:Component>

  <MyTextArea width="300" height="300"/>

  <mx:TextArea width="300" height="300"/>

</mx:Application>

You can also break the MyTextArea out into a separate class file. But I put it all in one file because it's easier to test.

Answer 2

Or

<mx:TextArea width="300" height="300" keyFocusChange="event.preventDefault();event.target.replaceSelectedText('\t');"/>