Flex Examples

The following example shows how you can limit the amount of text a user can enter into a TextArea control by using the maxChars property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/20/limiting-the-amount-of-text-you-can-enter-into-a-flex-textarea-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function textArea_change(evt:Event):void {
                var ta:TextArea = evt.currentTarget as TextArea;
                progressBar.setProgress(ta.length, ta.maxChars);
            }

            private function progressBar_progress(evt:ProgressEvent):void {
                var pb:ProgressBar = evt.currentTarget as ProgressBar;
                if (pb.percentComplete > 95) {
                    pb.setStyle("themeColor", "red");
                } else if (pb.percentComplete > 80) {
                    pb.setStyle("themeColor", "yellow");
                } else {
                    pb.setStyle("themeColor", "haloGreen");
                }
            }
        ]]>
    </mx:Script>

    <mx:Panel>
        <mx:TextArea id="textArea"
                width="320"
                height="120"
                maxChars="300"
                change="textArea_change(event);" />
        <mx:ControlBar>
            <mx:ProgressBar id="progressBar"
                    mode="manual"
                    minimum="0"
                    maximum="{textArea.maxChars}"
                    label="%1 of %2 characters (%3%%)"
                    labelPlacement="center"
                    width="100%"
                    progress="progressBar_progress(event);" />
        </mx:ControlBar>
    </mx:Panel>

</mx:Application>

View source is enabled in the following example.