About the TextArea component

The TextArea component wraps the native ActionScript TextField object. You can use styles to customize the TextArea component; when an instance is disabled its contents display in a color represented by the "disabledColor" style. A TextArea component can also be formatted with HTML, or as a password field that disguises the text.

A TextArea component can be enabled or disabled in an application. In the disabled state, it doesn't receive mouse or keyboard input. When enabled, it follows the same focus, selection, and navigation rules as an ActionScript TextField object. When a TextArea instance has focus, you can use the following keys to control it:

A live preview of each TextArea instance reflects changes made to parameters in the Property inspector or Component Inspector panel while authoring. If a scroll bar is needed, it appears in the live preview, but it does not function. Text is not selectable in the live preview and you cannot enter text into the component instance on the Stage.

When you add the TextArea component to an application, you can use the Accessibility panel to make it accessible to screen readers. Using the TextArea component

Key	Description
Arrow keys	Moves the insertion point one line up, down, left, or right.
Page Down	Moves one screen down.
Page Up	Moves one screen up.
Shift + Tab	Moves focus to the previous object.
Tab	Moves focus to the next object.

You can use a TextArea component wherever you need a multiline text field. If you need a single-line text field, use the TextInput component. For example, you could use a TextArea component as a comment field in a form. You could set up a listener that checks if field is empty when a user tabs out of the field. That listener could display an error message indicating that a comment must be entered in the field.

TextArea component parameters

The following are authoring parameters that you can set for each TextArea component instance in the Property inspector or in the Component Inspector panel:

text indicates the contents of the TextArea. You cannot enter carriage returns in the Property inspector or Component Inspector panel. The default value is "" (empty string).

html indicates whether the text is formatted with HTML (true) or not (false). The default value is false.

editable indicates whether the TextArea component is editable (true) or not (false). The default value is true.

wordWrap indicates whether the text wraps (true) or not (false). The default value is true.

You can write ActionScript to control these and additional options for TextArea components using its properties, methods, and events. For more information, see TextArea class.

Creating an application with the TextArea component

The following procedure explains how to add a TextArea component to an application while authoring. In this example, the component is a Comment field with an event listener that determines if a user has entered text.

To create an application with the TextArea component, do the following:

Drag a TextArea component from the Components panel to the Stage.
In the Property inspector, enter the instance name comment.
In the Property inspector, set parameters as you wish. However, leave the text parameter blank, the editable parameter set to true, and the password parameter set to false.

Select Frame 1 in the Timeline, open the Actions panel, and enter the following code:

textListener = new Object();
textListener.handleEvent = function (evt){
  if (comment.length < 1)  {     
  Alert(_root, "Error", "You must enter at least a comment in this field", mxModal | mxOK); 
  }
}
comment.addEventListener("focusOut", textListener);

This code sets up a focusOut event handler on the TextArea comment instance that verifies that the user typed in something in the text field.

Once text is entered in the comment instance, you can get its value as follows:
```
var login = comment.text;
```