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
text string The text displayed within the text input box.
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 _.

Returns

No return value. Modifies screen only.

Tips

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