Input text fields

Input text fields are zones in which the user can add and modify text.
To create an input text field, define a TextField object, then set the value "input" (or TextFieldType.INPUT) for its "type" property.

- Syntax:

var inputField:TextField = new TextField();
inputField = "input";

Once you have created an object for Input Text Field (with the "TextField" class), you can access various properties of this object to define the text area, the size, position, text format, and other properties for the input field. Such as, defining a border, background color, setting the allowed number of characters or restricting the characters that can be added in the input field.

Here's an example with Text Input (See the explanations in the code):

// Defining a TextField object instance
var txt_inp:TextField = new TextField();

// Apply properties to "txt_inp" instance
txt_inp.type = "input";            // Set the text field as Input
txt_inp.x = 100;                   // Distance from the left border
txt_inp.y = 50;                    // Distance from the top border
txt_inp.width = 100;               // Length of the text field
txt_inp.height = 20;               // Height
txt_inp.border = true;             // Enable to display border
txt_inp.borderColor = 0x0000da;    // Define the border color

// define to allow only numbers and small letters from 'a' to 'e'
txt_inp.restrict = "0-9 a-e";

// Set the maximum number of characters that can be written
txt_inp.maxChars = 28;

txt_inp.text = 'Name';             // The initial text in the input field

// Add the "txt_inp" instance in the Flash presentation
addChild(txt_inp);

- This code will display the following Flash presentation. You can delete and add another text in the input field, but, becouse the "restrict" property is set ( txt_inp.restrict = "0-9 a-e"; ), you can only write numbers and letters from 'a' to 'e'.

To download the FLA file with this example, click Input TextField.

- To be able to add multiple rows of text (with enter) in the Input field, you must set the multiline property to true (txt_inp.multiline = true;).
- To make the Input Text an Input field for password (the characters to be hidden and displayed with asterisk "*"), set the displayAsPassword property to true.
- To format the text in the Text field, apply the properties of the "TextFormat" object.

Using TextEvent Input

Usually, the text added in an Input field is used for certain actions.
With the "addEventListener()" and TextEvent.TEXT_INPUT event applied to a TextField instance, the Flash detects the time (or event) when the user writes something in the Input field; it can take the character or text added in the field, and perform different instructions according to the text added.
The syntax to use the "TextEvent" object is:

inputField.addEventListener(TextEvent.TEXT_INPUT, someFunction);
function someFunction(insTxtEv:TextEvent):void
{
  // code to be execute, when the user adds a character in "inputField"
}

- "inputField" is the "TextField" instance for the Input text field.
- "addEventListener()" is an ActionScript 3 method used to detect events in the Flash presentation.
- "TextEvent.TEXT_INPUT" sets the event type that must be detected.
- "someFunction" is the function that will be called when the user writes in the Input field.
- "insTxtEv" receives data passed by the event listener.
- insTxtEv.text returns the last character inserted by the user in the Input field.

The TEXT_INPUT event is not dispached when the user delete the text (with Delete or Backspace)

Here's an example. We create an input text field and define an event listener to change the border and background color of the input field, depending on the number of characters added in that text field.

// Define a TextField instance
var txt_inp:TextField = new TextField();

// Apply properties to the "txt_inp" instance
txt_inp.type = "input";            // Sets the text field as Input
txt_inp.x = 100;                   // Distance from the left border
txt_inp.y = 50;                    // Distance from the top border
txt_inp.width = 100;               // Length of the text field
txt_inp.height = 20;               // Height
txt_inp.border = true;             // enables to display the border
txt_inp.borderColor = 0x0000da;    // Define the border color
txt_inp.maxChars = 28;             // Maximum number of characters allowed
txt_inp.backgroundColor = 0xfefe18;     // Define the background color
txt_inp.background = true;              // enable to display the background

// Add the instance with "txt_inp" in the Flash presentation
addChild(txt_inp);

// Register an event listener that detects when something is written in the TextField
txt_inp.addEventListener(TextEvent.TEXT_INPUT, txtInp);

// The function that will be called by the event listener
function txtInp(txtEvent:TextEvent):void
{
  // gets the number of characters (stored in "txt_inp")
  var nr:int = txt_inp.text.length;

  // depending on the number of characters, changes the border and background color
  if(nr<3) txt_inp.borderColor = 0xda0000;
  else if(nr<5) txt_inp.borderColor = 0x00da00;
  else if(nr>5) txt_inp.backgroundColor = 0xfea8fe;
}

- If you add this code in a new Flash document, the result will be the following presentation.
To see the effect, type a few characters in the text field.

To download the FLA file with this example, click TextEvent Input.

- To capture the character typed by the user, but to not add it in the input field, use the preventDefault() method in the function called by the event listener (for example, txtEvent.preventDefault();). It is useful when, for example, you want to display a different word or character depending on what it is written.
- To add multiple input text fields, you must create a "TextField" instance for each Input field.

FocusEvent - FOCUS_IN and FOCUS_OUT events

FocusEvent object can be used to detect when the user changes the focus from a text field.
- FocusEvent.FOCUS_IN - is dispatched when the TextField receives focus from the user.
- FocusEvent.FOCUS_OUT - is dispatched after the TextField loses focus.

Study the next example. It creates two input text fields, and registers FOCUS_IN and FOCUS_OUT events to change the border and background color when the user changes the focus from these text fields.

// Function to create Input Text fields
// Takes as argument: a TextField instance, Y distance and the initial text
function setInput(inst:TextField, dy, txt):void
{
  // Apply properties to the instance in the "inst" parameter
  inst.type = "input";            // Set the text field as Input
  inst.x = 100;                   // Distance from the left border
  inst.y = dy;                    // Distance from the top border
  inst.width = 100;               // Length of the text field
  inst.height = 20;               // Height
  inst.border = true;             // enable to display the border
  inst.borderColor = 0x0000da;    // Define the border color
  inst.maxChars = 28;             // Maximum number of character allowed
  inst.backgroundColor = 0xe8e8e8;     // Define the background color
  inst.background = true;         // enable to display the background
  inst.text = txt;                // adds the initial text in the Input

  // Add the instance in the Flash presentation
  addChild(inst);
}

// Function for FOCUS_IN
function setFIn(focus:FocusEvent):void
{
  // Define the border and background color for the target field
  (focus.target as TextField).borderColor = 0x00d800;
  (focus.target as TextField).backgroundColor = 0xfefe08;
}

// Function for FOCUS_OUT
function setFOut(focus:FocusEvent):void
{
  // Define the border and background color for the target field
  (focus.target as TextField).borderColor = 0xfe0000;
  (focus.target as TextField).backgroundColor = 0xe7e8fe;
}

// Define the first and second TextField instance
var txt_inp1:TextField = new TextField();
var txt_inp2:TextField = new TextField();

// register FocusEvent listener (FOCUS_IN and FOCUS_OUT), for each instance
txt_inp1.addEventListener(FocusEvent.FOCUS_IN, setFIn);
txt_inp1.addEventListener(FocusEvent.FOCUS_OUT, setFOut);
txt_inp2.addEventListener(FocusEvent.FOCUS_IN, setFIn);
txt_inp2.addEventListener(FocusEvent.FOCUS_OUT, setFOut);

// Call the function "setInput" to define the fields for each TextField instance
setInput(txt_inp1, 50, 'Input 1');
setInput(txt_inp2, 80, 'Input 2');

- The Flash presentation displays 2 Text Input fields. When the user clicks on any of them, its background and border colors change (as set in the "setFIn()" function), and when that field loses focus, the border and background color change again (as set in the "setFOut()" function).
To see the effect, click on each text field.

To download the FLA file with this example, click FocusEvent - FOCUS_IN and FOCUS_OUT.

<<-Adding text with ActionScript -- addChild and removeChild->>

Input text fields

Actionscript Course

Using TextEvent Input

FocusEvent - FOCUS_IN and FOCUS_OUT events

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Last accessed pages

Popular pages this month