Methods | Properties | Effects | Events | Styles | Examples Frames | No Frames

mx.controls
Class TextArea

Inheritance ImageInheritance ImageInheritance ImageInheritance Image

class TextArea
extends mx.core.ScrollView

The TextArea control is a multiline text field with a border and optional scroll bars. All text in a TextArea control must use the same styling unless it is HTML text. The TextArea control supports the HTML rendering capabilities of Macromedia Flash Player. The TextArea control broadcasts a change event.

If you disable a TextArea control, it displays contents in a different color, represented by the disabledColor style. You can set a TextArea control to read-only to disallow editing of the text. To conceal input text by displaying characters as asterisks, you set the TextArea's password property.

MXML Syntax

The <mx:TextArea> tag inherits all the properties of its parent classes, and the following properties: 

 <mx:TextArea
   editable="true|false"
   hPosition="Always 0 when wordwrap is set to true."
   hScrollPolicy="auto|on|off"
   htmlText="No default."
   maxChars="undefined"
   maxHPosition="Always 0 when wordwrap is set to true."
   maxVPosition="0"
   password="false|true"
   restrict="null"
   text="No default."
   vPosition="0"
   vScrollPolicy="auto|on|off"
   wordWrap="false|true"
   change="Event handler; no default."
 />

Click here to view the Examples

See Also
    TextInput


Methods

Methods inherited from class mx.core.ScrollView
childLoaded   createChildren   createChildWithStyles   getViewMetrics   init   layoutChildren   setScrollProperties  

Methods inherited from class mx.core.View
childLoaded   constructObject2   createChild   createChildren   destroyAllChildren   destroyChild   destroyChildAt   draw   getBorderMetrics   getChildAt   getChildIndex   getViewMetrics   init   layoutChildren   layoutChrome   setChildIndex  

Methods inherited from class mx.core.UIComponent
drawFocus   getFocus   getFocusManager   setEnabled   setFocus  

Methods inherited from class mx.core.UIObject
addEventListener   applyProperties   buildDepthTable   commitProperties   constructObject2   createAccessibilityImplementation   createChildAtDepth   createChildren   createClassChildAtDepth   createClassObject   createEmptyObject   destroyObject   dispatchEvent   doLater   draw   drawRect   executeBindings   fillRect   findNextAvailableDepth   getRepeaterItem   getStyle   handleEvent   init   invalidate   invalidateLayout   invalidateProperties   invalidateSize   invalidateStyle   layoutChildren   measure   move   redraw   removeEventListener   setDepthAbove   setDepthBelow   setMask   setSize   setSizeNoLayout   setStyle   swapDepths  



Properties
       className: String
Name of this class.
       editable: Boolean
If true, the user can edit the text.
       hPosition: Number
Pixel position of the leftmost character that is currently displayed.
       hScrollPolicy: String
Whether the horizontal scroll bar is always on, on, always off, off, turns on when needed, or auto.
       htmlText: String
Contains HTML formatted text.
       length: Number    [Read-Only]
Length of text in the TextArea.
       maxChars: Number
Maximum number of characters that the text field can contain.
       maxHPosition: Number    [Read-Only]
Maximum value of hPosition.
       maxVPosition: Number    [Read-Only]
Maximum value of vPosition.
       password: Boolean
If true, the field is a password field.
       restrict: String
Set of characters that a user can enter into the text field.
       tabIndex: Number
Tab order for navigating with the Tab key.
       text: String
Text string that appears in the control.
staticversion: String
Version string for this class.
       vPosition: Number
Line number of the top row of characters that is currently displayed.
       vScrollPolicy: String
Whether the vertical scroll bar is always on, on, never on, off, or turns on when needed auto.
       wordWrap: Boolean
If true, the text wraps.

Properties inherited from class mx.core.ScrollView
className   hPosition   hScrollPolicy   liveScrolling   maxHPosition   maxVPosition   scrollTipFunction   showScrollTips   version   vPosition   vScrollPolicy  

Properties inherited from class mx.core.View
baselinePosition   className   numChildren   version  

Properties inherited from class mx.core.UIComponent
enabled   errorString   tabEnabled   tabIndex   version  

Properties inherited from class mx.core.UIObject
alpha   baselinePosition   className   depth   documentDescriptor   height   heightFlex   id   instanceIndices   isDocument   kStretch   layoutHeight   layoutWidth   maxHeight   maxWidth   minHeight   minWidth   mouseX   mouseY   nestLevel   oldHeight   oldWidth   oldX   oldY   parent   parentApplication   parentDocument   percentHeight   percentWidth   preferredHeight   preferredWidth   repeaterIndices   scaleX   scaleY   styleName   tabEnabled   toolTip   version   visible   width   widthFlex   x   y  



Effects

Effects inherited from class mx.core.UIComponent
focusInEffect   focusOutEffect  

Effects inherited from class mx.core.UIObject
creationCompleteEffect   hideEffect   mouseDownEffect   mouseOutEffect   mouseOverEffect   mouseUpEffect   moveEffect   resizeEffect   showEffect  



Events
changeBroadcast when text in the TextArea control changes. The target property of the event object contains a reference to the component that triggered the event. The type property of the event object contains the name of the event, change.

Events inherited from class: mx.core.ScrollView
scroll 

Events inherited from class: mx.core.View
childCreated  childDestroyed  childIndexChanged 

Events inherited from class: mx.core.UIComponent
focusIn  focusOut  invalid  keyDown  keyUp  valid  valueCommitted 

Events inherited from class: mx.core.UIObject
creationComplete  dragComplete  dragDrop  dragEnter  dragExit  dragOver  draw  effectEnd  effectStart  hide  hideToolTip  initialize  load  mouseChangeSomewhere  mouseDown  mouseDownSomewhere  mouseMove  mouseMoveSomewhere  mouseOut  mouseOver  mouseUp  mouseUpSomewhere  move  resize  show  showToolTip  unload 



Styles
disabledColor Type: Number   Format: Color   CSS Inheritance: yes
Disabled color of the TextArea.

Styles inherited from class mx.core.UIComponent
backgroundAlpha   backgroundColor   backgroundDisabledColor   backgroundImage   backgroundSize   barColor   borderCapColor   borderColor   borderSides   borderStyle   borderThickness   cornerRadius   disabledColor   dropShadow   errorColor   fillColors   highlightColor   modalTransparency   scrollTrackColor   selectedFillColors   shadowCapColor   shadowColor   shadowDirection   shadowDistance   symbolBackgroundColor   symbolBackgroundDisabledColor   symbolBackgroundPressedColor   symbolColor   symbolDisabledColor   themeColor  

Styles inherited from class mx.core.UIObject
color   fontFamily   fontSize   fontStyle   fontWeight   horizontalGap   leading   marginLeft   marginRight   textAlign   textDecoration   textIndent   verticalGap  



Property Detail

className

className: String  

Name of this class.

editable

editable: Boolean  

If true, the user can edit the text. The default value is true.

hPosition

hPosition: Number  

Pixel position of the leftmost character that is currently displayed. This property is always set to 0, and ignores changes, if wordWrap is set to true.

hScrollPolicy

hScrollPolicy: String  

Whether the horizontal scroll bar is always on, on, always off, off, turns on when needed, or auto. The default value is auto.

htmlText

htmlText: String  

Contains HTML formatted text. If your text string contains HTML tags, you must wrap it in the CDATA tag. The control collapses any white space characters, such as tab and newline characters. For the special characters left angle bracket (<), right angle bracket (>), or ampersand (&), insert the HTML equivalents of &lt;, &gt;, and &amp;.

Note: The htmlText property ignores CSS style settings for the control, and instead relies on the HTML tags in the string for formatting.

Thus, style attributes such as color, fontSize, and fontFamily are ignored.

length

length: Number   [Read-Only]

Length of text in the TextArea.

maxChars

maxChars: Number  

Maximum number of characters that the text field can contain. The default value is undefined.

maxHPosition

maxHPosition: Number   [Read-Only]

Maximum value of hPosition. The default value is 0. This property is always set to 0 if wordWrap is set to true.

maxVPosition

maxVPosition: Number   [Read-Only]

Maximum value of vPosition. The default value is 0.

password

password: Boolean  

If true, the field is a password field. The default value is false. If you set this property to true, each text character entered into the control appears as the character " ".

restrict

restrict: String  

Set of characters that a user can enter into the text field. If the value of the restrict property is null or an empty string, you can enter any character. This property only restricts user interaction; a script can put any text into the text field. If the value of the restrict property is a string of characters, you can enter only characters in that string into the text field.
Flex scans the string from left to right. You can specify a range by using the dash (-). If the string begins with ^, the string specifies the characters that may not be entered into the control.
For example, the string "^a-z" means all upper case letters may be entered, but no lower case letters are allowed. Because some characters have a special meaning when used in the restrict property, you must use the backslash character to specify the literal characters -, ^, and \, as in the following:
\^
\-
\\

tabIndex

tabIndex: Number  

Tab order for navigating with the Tab key.

text

text: String  

Text string that appears in the control. The control collapses any white-space characters, such as tab and newline characters. Any HTML tags in the text string are ignored, and appear as entered in the string. For the special characters left angle bracket (<), right angle bracket (>), or ampersand (&), wrap the text string in the CDATA tag.

If you wish to display text that contains HTML tags then you should use the htmlText property instead.

version

static  version: String  

Version string for this class.

vPosition

vPosition: Number  

Line number of the top row of characters that is currently displayed. The default value is 0.

vScrollPolicy

vScrollPolicy: String  

Whether the vertical scroll bar is always on, on, never on, off, or turns on when needed auto. The default value is auto.

wordWrap

wordWrap: Boolean  

If true, the text wraps. The default value is true.


Examples
TextAreaExample.mxml 
<?xml version="1.0"?>
<!-- Simple example to demonstrate the TextArea control -->
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" backgroundColor="#FFFFFF">

    <mx:Script>
         <![CDATA[
           var sampleText= "The TextArea control is a multiline text field with a border and optional scroll bars." +
                           "All text in a TextArea control must use the same styling unless it is HTML text." +
                           "The TextArea control supports the HTML rendering capabilities of Macromedia Flash Player." +
                           "The TextArea control broadcasts a change event." +
                           "If you disable a TextArea control, it displays contents in a different color," +
                           "represented by the disabledColor style. You can set a TextArea control to read-only to" +
                           "disallow editing of the text. To conceal input text by displaying characters as asterisks," +
                           "you set the TextArea's password property.";
                                                            
           function showOutput()
           {
              textAreaoutput.text= "TextArea Format: " + sampleText;                         
           }
             
           function clearText()
           {
              textAreaoutput.text="";
           }
           
         ]]>
    </mx:Script>

    <mx:Panel title="TextArea Panel" marginTop="10">
        
        <mx:TextArea id="textAreaoutput" width="300"  height="170"/>
        
        <mx:HBox>
                <mx:Button label="Press Enter"  click="showOutput();"/>
                <mx:Button label="Clear"  click="clearText();"/>
        </mx:HBox>
               
    </mx:Panel>

</mx:Application>



 

Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/flex/15/asdocs_en/mx/controls/TextArea.html