Working with AS3 Input Text Fields

You can add input text fields to your Flash movie in order to allow text-based interaction from your users. An input text field is one that accepts information from the users of your Flash movie. The user simply needs to select the text field and type inside it in order to place information. This is in contrast to a dynamic text field which will only display information, and will not allow the user to alter that information. An input text field can be created using the TextField class as well. You will simply need to set the type to "input". In this article, we're going to learn how to work with input text fields in ActionScript 3. We'll learn how to create them using code, how to set some of the properties, how to set the focus to an input text field, and how to set restrictions to which characters a user can type in them.

Let's begin.

Open a new Flash ActionScript 3 document. Select the first frame and then launch the Actions Panel. In the Script Pane, type in the following code:

var inputField:TextField = new TextField();

addChild(inputField);

inputField.border = true;
inputField.width = 200;
inputField.height = 150;
inputField.x = 75;
inputField.y = 50;

Here, we've created a new instance of the AS3 TextField class, and we've given it an instance name of inputField. We've set some of the text field's properties as well, such as the width, height, border, etc... By default, an instance of the TextField class is of the dynamic type. So if you test the movie now, you won't be able to type inside it. In order to make this instance an AS3 input text field, use the type property of the TextField class, and give it a value of "input" (the value must be specified as a string, i.e it should be in quotation marks).

var inputField:TextField = new TextField();

addChild(inputField);

inputField.border = true;
inputField.width = 200;
inputField.height = 150;
inputField.x = 75;
inputField.y = 50;
inputField.type = "input";

So now that we've set the type to "input", let's go ahead and test the movie. Then click inside the text field and start typing. You should see that the text field will accept your input.

NOTE: After the test movie launches, go to the Control menu and make sure that Disable Keyboard Shortcuts is checked. This is not really a requirement, but whenever you'd like to test the text fields inside your Flash movie, there are some cases where enabled keyboard shortcuts will interfere with your keystrokes. So it's a good idea to disable keyboard shortcuts when you're testing the ActionScript enabled text fields in your Flash movie.

Continue typing inside the input text field and then try pressing the enter or return key on your keyboard in order to move down to the next line. If you find that you are unable to move down to the next line, then you can set the multiline property of the text field to true. If it is set to false, then the text inside your text field will remain in one line regardless of the text field's height and regardless of how many times you press enter or return.

var inputField:TextField = new TextField();

addChild(inputField);

inputField.border = true;
inputField.width = 200;
inputField.height = 150;
inputField.x = 75;
inputField.y = 50;
inputField.type = "input";
inputField.multiline = true;

Now, if you test the movie again, you should see that hitting the enter or return key on your keyboard will let you move down to the next line within your text field.

Moving the Focus to an AS3 Input TextField

You might have noticed that every time you test the movie, you will need to click inside the text field first in order to be able to type inside it. This happens because the focus must be on the input text field first, before it accepts user input. Focus refers to the object on the stage that is currently active. The focus usually moves to a certain object when you mouse over or click on it. So the focus will not automatically go to the input text field just because it's on the stage. If you'd like the focus to move to the input text field right away, then can use the focus property of the stage and set it to the input text field like so:

var inputField:TextField = new TextField();

addChild(inputField);

inputField.border = true;
inputField.width = 200;
inputField.height = 150;
inputField.x = 75;
inputField.y = 50;
inputField.type = "input";
inputField.multiline = true;

stage.focus = inputField;

So now when you test the movie, the focus will quickly move to the input text field, enabling you to type inside it immediately, without having to click inside it first.

REMINDER: Make sure that keyboard shortcuts are disabled.

NOTE: In some cases, even if you have keyboard shortcuts disabled, testing input text fields within the Flash test movie environment can still get buggy. Personally, what I do is I make sure that the Flash movie is saved, then I test the movie in order to generate a SWF file in the same folder where the FLA file is saved. Then I would close the test movie, and then go to the folder that contains the SWF file. I would then open that SWF file and test my input text field(s) there.

Restricting Character Input in AS3

In some cases, you might want to make sure that there are some restrictions as to which characters as well as the number of characters that a user can type inside an input text field. For example, you can create an input text field that will only accept numerical characters, and will only allow a maximum of 5 characters to be type inside it. If you want to limit the number of characters that a user can type inside a given input text field, then you can use the maxChars property of the TextField class. For example:

inputField.maxChars = 10;

This will limit the number of allowable characters that the user can type inside the input text field to a maximum of 10 characters.

NOTE: In the multiline input text field in our example, each time you hit enter or return on the keyboard while the text field is in focus will count as one character subtracted from the character limit. So with a maxChars value of 10, if you hit enter or return in the multiline input text field 2 times before you type in the other characters, then you'll only be able to type in only 8 more.

If you want to put restrictions as to which characters a user can type inside an input text field, then you can use the restrict property of the TextField class. Here's an example:

inputField.restrict = "abcd";

In this example, only the lower case characters a, b, c, and d are ALLOWED. Any other character will not appear in the input text field if the user tries to type them in.

If you want to allow the uppercase characters A, B, C and D, then you'll need to add them to the set like so:

inputField.restrict = "ABCDabcd";

There is no need to add a space between the uppercase letters and the lowercase letters. If you add in a space anywhere in this set of characters, Flash is going to think that you want to allow spaces to be typed inside the input text field. But if you actually want spaces to be allowed, then you can add a space anywhere within the set of characters.

You can also specify a range of characters like so:

inputField.restrict = "A-Z";

In this example, all uppercase character from A to Z are allowed.

In this other example, uppercase A to Z, lowercase a to z, and numerical characters 0 to 9 are allowed:

inputField.restrict = "A-Za-z0-9";

What if I would like to specify characters that should NOT be allowed?
If you want to specify characters that should NOT be allowed, then you start off with a caret (^). For example:

inputField.restrict = "^abcd";

This allows all other characters except for lowercase a, b, c, and d.

In this example, all characters are allowed except for lowercase a to z:

inputField.restrict = "^a-z";

In this example, all characters are allowed except for lowercase a to f, uppercase A to F and numerical characters 3 to 7:

inputField.restrict = "^a-fA-F3-7";

And those are some of the basics on how you can work with AS3 input text fields.