Recipe 8.5 Making a User Input Field

8.5.1 Problem

You want to create a user input field to allow the user to enter text.

8.5.2 Solution

Set the text field's type property to "input". Alternatively, you can create and use a custom createInputTextField( ) method.

8.5.3 Discussion

When a text field is created using createTextField( ), it defaults to being a dynamic field. This means that it can be controlled with ActionScript but the user cannot input text into it. To enable the field for user input, set the type property to "input", like so:

myTextField.type = "input";

Though it isn't a requirement, input fields generally also have a border and a background; otherwise, the user may have difficulty finding and selecting the field so as to enter a value into it:

myTextField.border = true;
myTextField.background = true;

For a user to be able to input text, the field's selectable property must be true, which is the default. You do not need to explicitly set the selectable property to true unless you previously set it to false.

As you can see, several steps are required to successfully make an input text field using ActionScript. While none of them are particularly difficult, they can be a bit tedious when you are creating multiple input text fields. Therefore, it is convenient to create a custom createInputTextField( ) method for the MovieClip class that takes care of these steps with a single method call. You should add the following code to a TextField.as file in your Flash Include directory for easy inclusion in other projects. You may prefer to add it to the MovieClip.as file used throughout Chapter 7, since it adds a method to the MovieClip class.

MovieClip.prototype.createInputTextField = function (name, depth, x, y, w, h) {

  // Define a default width and height for text fields created with this method
  // (width defaults to 100 and height defaults to 20).
  if (w == undefined) {
    w = 100;
  }
  if (h == undefined) {
    h = 20;
  }

  // Create the text field using the built-in MovieClip.createTextField(  ) method.
  this.createTextField(name, depth, x, y, w, h);

  // Then assign the necessary values to the object to make it an input field.
  this[name].border = true;
  this[name].background = true;
  this[name].type = "input";
};

You can use the custom createInputTextField( ) method in your Flash movies to create an input text field with a single line of code. The method takes the same parameters in the same order as the createTextField( ) method, but it automatically makes the text field an input field with the border and background turned on. Additionally, with the createInputTextField( ) method, you can omit the w and h parameters and allow the text field to use default settings (as opposed to the createTextField( ) method, which requires that you provide all parameters):

// Make sure to include the necessary ActionScript file. This assumes you added the
// custom createInputTextField(  ) method to TextField.as and not MovieClip.as.
#include "TextField.as"

// Create an input text field allowing the x and y coordinates to default to (0,0)
// and the width and height to default to 100   x   20.
_root.createInputTextField("myInputText", 1);