|
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 component
A
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 the Adobe
Flash Platform
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 parameters
You
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 the Adobe
Flash Platform
.
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 the Adobe
Flash Platform
.
Create an application with the TextInput component
The
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
Confirm
Password:
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
displayA
s
Password
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 ActionScript
The 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.
|
|
|
