textInput

Category:UI Controls

Creates a text input box on the screen displaying the text provided and referenced by the given id at default location (0,0).

Your apps will sometimes need to collect text input from the user. You can code an event handler that is triggered by various events in the textInput box. Use getText() to get the text currently in the textInput box.

Examples

Example: Label for a Text Input Box

Create a label and associate it with a text input box.

// Create a label and associate it with a text input box.
textLabel("YourNameLabel","Enter your name:", "YourName");
textInput("YourName","");

Example Simple Form

Demonstrate UI element modification and query functions.

// Demonstrate UI element modification and query functions.
textInput("id", "Enter your name");
setPosition("id", 50, 200, 200, 50);
onEvent("id", "change", function(event) {
  hideElement("id");
  write("Hi " + getText("id"));
});

// Acknowledge keystrokes.
textInput("id", "type here");
onEvent("id", "keypress", function(event) {
  console.log("You typed a letter.");
});

Syntax

textInput(id, text)

Parameters

Name	Type	Required?	Description
id	string		The unique identifier for the text input box. The id is used for referencing the text input box in event handlers or other UI element modification functions. Must begin with a letter, contain no spaces, and may contain letters, digits, - and _.
text	string		The text displayed within the text input box.

Returns

No return value. Modifies screen only.

Tips

If there is another UI element at location (0,0) the text input box is placed at the next available position to the right or below.
There are various UI element modification functions available: setText(), showElement(), hideElement(), deleteElement(), setPosition(), setSize().
There are various UI element query functions available: getText(), getXPosition(), getYPosition().
You should always provide a label for your text input box.
Text input boxes can also be created and initialized in Design mode.

Found a bug in the documentation? Let us know at documentation@code.org