InputText component formatted with thousands separators
I run into problem with standard InputText Flex component. I want to format numerical input to present a financial data. I want all number formatting to be done automatically with thousands separators. I checked many potential ways but surprisingly Flex InputText component has no format property.
Finally I found the workaround how to do it simple as it only could be. For that purpose I use CurrencyFormatter component and custom function which gets rid thousands separators (in my case it is space character).
<mx:Script>
<![CDATA[
[Bindable]
private var cost:Number = 1234342;
private function removeFormatting(e: Event) : void {
var array : Array;
array = e.target.text.split(" ");
e.target.text = array.join("");
}
private function formatInput(e: Event) : void {
e.target.text = currencyTextInputFormatter.format(e.target.text);
}
]]>
</mx:Script>
<mx:CurrencyFormatter id="currencyTextInputFormatter"
precision="0"
currencySymbol=""
useThousandsSeparator="true" thousandsSeparatorFrom=" "
thousandsSeparatorTo=" " />
<mx:TextInput id="idInput" text="{cost}"
updateComplete="formatInput(event)"
focusIn="removeFormatting(event)"
focusOut="formatInput(event)"
restrict="0123456789" maxChars="11"
textAlign="right"/>
The following example show the complete source code for custiomization InputText component.
View source is enabled in the following example.