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

In this lesson, were 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. Well create a simple example of a Flash movie where the user can type in someones name inside an input text field. When the user clicks on a button or presses a keyboard key, then well 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.

Lets 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, weve 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. Im going to draw a circle and convert it into a button symbol. And then Ill 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. Im going to name this button submit_btn.

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

Next, lets 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, weve 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 dont need to specify it here. So this text field will not allow any input from the user. Well simply use it to display the greeting. What wed 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. Lets 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, lets take a look at the code that we need to write inside the event listener functions 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 well use the + operator to add it to the rest of the words and characters in our greeting phrase:

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

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

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

So lets 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 lets 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 lets create the event handler. For keyboard events, the event listener is usually added to the stage. Since the stage is usually always active, then its an ideal object that can be used to dispatch keyboard events. If youd like to add an event listener for whenever a keyboard key is pressed, then you want to specify the KeyboardEvent.KEY_DOWN event. So lets 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, weve created the event handler for the key down event. The event listener function, which Ive 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 its 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 its 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 lets 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.