The
TextInput component is a single-line text component that is a wrapper
for the native ActionScript TextField object. If you need a multiline
text field, use the TextArea component. For example, you could use
a TextInput component as a password field in a form. You could also
set up a listener that checks whether the field has enough characters
when a user tabs out of the field. That listener could display an
error message indicating that the proper number of characters must be
entered.
You can set the textFormat property using the setStyle() method
to change the style of text that appears in a TextInput instance.
A TextInput component can also be formatted with HTML or as a password
field that disguises the text.
User interaction with the TextInput componentA
TextInput 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 TextInput instance
has focus, you can also use the following keys to control it:
Key
|
Description
|
Arrow keys
|
Move the insertion point one character left
or right.
|
Shift+Tab
|
Moves focus to the previous object.
|
Tab
|
Moves focus to the next object.
|
For more information about controlling focus, see the FocusManager
class in the ActionScript 3.0 Reference for Flash Professional and Work with FocusManager.
A live preview of each TextInput instance reflects changes made
to parameters in the Property inspector or Component inspector during
authoring. Text is not selectable in the live preview, and you cannot
enter text in the component instance on the Stage.
When you add the TextInput component to an application, you can
use the Accessibility panel to make it accessible to screen readers.
TextInput component parametersYou
can set the following authoring parameters for each TextInput component instance
in the Property inspector or the Component inspector: editable, displayAsPassword, maxChars, restrict,
and text. Each of these parameters has a corresponding
ActionScript property of the same name. For information on the possible
values for these parameters, see the TextInput class in the ActionScript 3.0 Reference for Flash Professional.
You can write ActionScript to control these and additional options
for the TextInput component using its properties, methods, and events.
For more information, see the TextInput class in the ActionScript 3.0 Reference for Flash Professional.
Create an application with the TextInput componentThe
following procedure explains how to add a TextInput component to
an application. The example uses two TextInput fields to receive
and confirm a password. It uses an event listener to see that a
minimum of eight characters have been entered and that the text
for the two fields matches.
Create a new Flash (ActionScript 3.0) document.
Drag a Label component from the Components panel to the Stage
and give it the following values in the Property inspector:
Enter the instance name pwdLabel.
Enter a value for W of 100.
Enter a value for X of 50.
Enter a value for Y of 150.
In the Parameters section, enter a value of Password: for
the text parameter.
Drag a second Label component from the Components panel to
the Stage and give it the following values:
Enter
the instance name confirmLabel.
Enter a value for W of 100.
Enter a value for X of 50.
Enter a value for Y of 200.
In the Parameters section, enter a value of ConfirmPassword: for
the text parameter.
Drag a TextInput component from the Components panel to the
Stage and give it the following values:
Enter the
instance name pwdTi.
Enter a value for W of 150.
Enter a value for X of 190.
Enter a value for Y of 150.
In the Parameters section, double-click the value for the displayAsPassword parameter
and select true. This causes the value entered in the text
field to be masked with asterisks.
Drag a second TextInput component from the Components panel
to the Stage and give it the following values:
Enter
the instance name confirmTi.
Enter a value for W of 150.
Enter a value for X of 190.
Enter a value for Y of 200.
In the Parameters section, double-click the value for the displayAsPassword parameter
and select true. This causes the value entered in the text
field to be masked with asterisks.
Open the Actions panel, select Frame 1 in the main Timeline,
and enter the following ActionScript code:
function tiListener(evt_obj:Event){
if(confirmTi.text != pwdTi.text || confirmTi.length < 8)
{
trace("Password is incorrect. Please reenter it.");
}
else {
trace("Your password is: " + confirmTi.text);
}
}
confirmTi.addEventListener("enter", tiListener);
This
code sets up an enter event handler on the TextInput
instance called confirmTi. If the two passwords
don’t match or the user types fewer than eight characters, the example
displays the message: “Password is incorrect. Please reenter it.”
If the passwords are eight characters or more and they match, the
example displays the value entered in the Output panel.
Select Control > Test Movie.
Create a TextInput instance using ActionScriptThe following
example creates a TextInput component using ActionScript. The example
also creates a Label that it uses to prompt a user to enter his
or her name. The example sets the component’s restrict property
to allow only uppercase and lowercase letters, a period, and a space.
It also creates a TextFormat object that it uses to format the text
in both the Label and TextInput components.
Create a new Flash (ActionScript 3.0) document.
Drag a TextInput component from the Components panel to the
Library panel.
Drag a Label component from the Components panel to the Library
panel.
Open the Actions panel, select Frame 1 in the main Timeline,
and enter the following ActionScript code:
import fl.controls.Label;
import fl.controls.TextInput;
var nameLabel:Label = new Label();
var nameTi:TextInput = new TextInput();
var tf:TextFormat = new TextFormat();
addChild(nameLabel);
addChild(nameTi);
nameTi.restrict = "A-Z .a-z";
tf.font = "Georgia";
tf.color = 0x0000CC;
tf.size = 16;
nameLabel.text = "Name: " ;
nameLabel.setSize(50, 25);
nameLabel.move(100,100);
nameLabel.setStyle("textFormat", tf);
nameTi.move(160, 100);
nameTi.setSize(200, 25);
nameTi.setStyle("textFormat", tf);
Select Control > Test Movie to run the application.
|
|
|