How to change width of TAB character in a Flex TextArea?

Question

Is it possible to change the width of an insert TAB character in a Flex TextArea?

I'm capturing FocusEvent.KEY_FOCUS_CHANGE events and manually inserting a "\t" into a text area styled with an embedded monospace font. By default, the TABs are being displayed two and a half monospace characters wide... I need them to display five monospace characters wide.

Any ideas on how to do this?

Answer 1

What about something like this?

<mx:Canvas>
    <mx:Script>
        [Bindable]
        public var myText:String;
    </mx:Script>
    <mx:TextArea id="textArea" text="{TabUtil.expand(myText)}" valueCommit="myText = TabUtil.contract(myText))" />
 </mx:Canvas>



  public class TabUtil
  {
       public static const SPACE:String = "     "; // Five spaces;
       public static function expand(text:String):String
       {
            return text.replace("\t",SPACE);
       }
       public static function contract(text:String):String
       {
            return text.replace(SPACE,"\t");
        }
   }

I forget the params of replace, but I think it may take a RegEx, in which case you'd need to tweak the above. But it should work.

Answer 2

The tabStops property of textFormat is what you are looking for. You can set the pixel values of where you want each tab to be placed.

var tf:TextFormat = new TextFormat(); tf.tabStops = [100, 200, 300, 400]; myTextArea.mx_internal::getTextField().defaultTextFormat = tf;