AS3: Enabling the user to submit the contents inside an input text field

In this lesson, we're going to learn how to add some ActionScript 3 functionality that will let a user submit the contents of an input text field by clicking on a button or pressing a keyboard key. We'll create a simple example of a Flash movie where the user can type in someone's name inside an input text field. When the user clicks on a button or presses a keyboard key, then we'll have Flash display a greeting (e.g. "Hello, John!") that will come out in another text field.

Go ahead and create a new Flash document so that we can begin.

Let's first create an input text field. Create a new layer for the ActionScript and type in the following code:

var myInput:TextField = new TextField();

addChild(myInput);

myInput.type = "input";
myInput.border = true;
myInput.x = 100;
myInput.y = 50;
myInput.width = 175;
myInput.height = 30;

Here, we've created a new instance of the TextField class named myInput. Go ahead and test the movie. You should see the input text field appear in the upper left region of your test movie.

Now that we have the text field, lets create a button symbol. So go ahead and use any of the drawing tools to draw any shape on the stage. You can place it anywhere. I'm going to draw a circle and convert it into a button symbol. And then I'll position it in the upper left region as well so that it will appear beside the input text field when we test the movie. Make sure that the button will not overlap with the text field. And make sure that you give this button an instance name by going to the Properties Inspector. I'm going to name this button submit_btn.

So when you test the movie again, you should have something like this:

Next, let's go ahead and create the text field that will display the greeting:

var myInput:TextField = new TextField();
var myGreeting:TextField = new TextField();

addChild(myInput);
addChild(myGreeting);

myInput.type = "input";
myInput.border = true;
myInput.x = 100;
myInput.y = 50;
myInput.width = 175;
myInput.height = 30;

myGreeting.border = true;
myGreeting.x = 100;
myGreeting.y = 100;
myGreeting.width = 175;
myGreeting.height = 30;

Here, we've created another instance of the TextField class named myGreeting. So when you test the movie now, another text field should appear right below the first one we created. This text field will be a dynamic text field since we did not specify a type (unlike the first one where we specified type = "input"). The default type is dynamic, which is why we don't need to specify it here. So this text field will not allow any input from the user. We'll simply use it to display the greeting. What we'd like is for the user type in a name inside the input text field first, and then click on the button in order to display the greeting in the dynamic text field. Let's go ahead and create the event handler for the button first:

myGreeting.border = true;
myGreeting.x = 100;
myGreeting.y = 100;
myGreeting.width = 175;
myGreeting.height = 30;

submit_btn.addEventListener(MouseEvent.CLICK, onClick);

function onClick(e:MouseEvent):void
{

}

Now that we have the AS3 event handler for the mouse click, let's take a look at the code that we need to write inside the event listener function's body.

In order to retrieve the contents of a text field, we can use the text property of the TextField class. So we can retrieve the contents of our input text field using:

myInput.text

And then we'll use the + operator to add it to the rest of the words and characters in our greeting phrase:

"Hello, " + myInput.text + "!"

Next, we'd like to display the greeting in our dynamic text field. In order to assign text to a text field, we'll use the text property of the text field class as well:

myGreeting.text = "Hello, " + myInput.text + "!";

So let's place that line inside the event listener function for the mouse click event:

submit_btn.addEventListener(MouseEvent.CLICK, onClick);

function onClick(e:MouseEvent):void
{
     myGreeting.text = "Hello, " + myInput.text + "!"
}

Go ahead and test the movie. Type in a name inside the input text field and then click on the submit button. After doing that, you should see the greeting come out in the dynamic text field.

Now let's go ahead and add the ActionScript 3 functionality that will also display the greeting when the user presses the enter key on the keyboard. First let's create the event handler. For keyboard events, the event listener is usually added to the stage. Since the stage is usually always active, then it's an ideal object that can be used to dispatch keyboard events. If you'd like to add an event listener for whenever a keyboard key is pressed, then you want to specify the KeyboardEvent.KEY_DOWN event. So let's go ahead and create the event handler for the key down event:

submit_btn.addEventListener(MouseEvent.CLICK, onClick);
stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyPressed);

function onClick(e:MouseEvent):void
{
     myGreeting.text = "Hello, " + myInput.text + "!"
}

function onKeyPressed(e:KeyboardEvent):void
{
     trace("A key has been pressed!");
}

So here, we've created the event handler for the key down event. The event listener function, which I've named onKeyPressed, has a trace statement inside it just so we can check if the event handler is working. Go ahead and test the movie. And make sure you disable keyboard shortcuts (test the movie first and then go to Control > Disable Keyboard Shortcuts to make sure that it's checked). Now, every time you press any keyboard key, you should see the phrase A key has been pressed! come out in the output window.

So now that it's working, we need to tell Flash to respond only when the ENTER key has been pressed. To do that, we can use an if statement that checks if the keyCode is equal to Keyboard.ENTER. The keyCode property refers to the last key that was pressed. This property can be accessed via the event object, which in our example is named e. And ENTER is a constant of the Keyboard class that refers to the enter or return key. So if the keyCode is equal to Keyboard.ENTER, then it means that it was the enter or return key that was last pressed. So let's go ahead and wrap the trace statement inside an if statement that checks for the keyCode:

function onKeyPressed(e:KeyboardEvent):void
{
     if(e.keyCode == Keyboard.ENTER)
     {          
          trace("A key has been pressed!");
     }
}

So now, if you test the movie, the trace statement only gets executed when the ENTER key is pressed. Pressing any other key will not yield any results.

And finally, all we have to do now is replace the trace statement in our key down event listener function with the line that will display the greeting inside the dynamic text field:

function onKeyPressed(e:KeyboardEvent):void
{
     if(e.keyCode == Keyboard.ENTER)
     {
          myGreeting.text = "Hello, " + myInput.text + "!";
     }
}

And that concludes this tutorial on writing ActionScript 3 code that will enable users to submit the contents of an input text field.