TextBox Component

Properties

backgroundColor
  The background color of the `TextBox``. You can choose a color by name in the Designer or in the Blocks Editor. The default background color is 'default' (shaded 3-D look).
Data type: color
Designer Writable true <textbox name="textboxName" backgroundColor="FFa757a3">
Code Writeable true textboxName.backgroundColor = "FFa757a3"
Code Readable true let variable = textboxName.backgroundColor

enabled
  If set, user can enter text into the TextBox.
Data type: boolean
Designer Writable true <textbox name="textboxName" enabled="true">
Code Writeable true textboxName.enabled = true
Code Readable true let variable = textboxName.enabled

fontBold
  Specifies whether the text of the TextBox should be bold. Some fonts do not support bold.
Data type: boolean
Designer Writable true <textbox name="textboxName" fontBold="true">
Code Writeable false
Code Readable false

fontItalic
  Specifies whether the text of the TextBox should be italic. Some fonts do not support italic.
Data type: boolean
Designer Writable true <textbox name="textboxName" fontItalic="true">
Code Writeable false
Code Readable false

fontSize
  Specifies the text font size of the TextBox, measured in sp(scale-independent pixels).
Data type: number
Designer Writable true <textbox name="textboxName" fontSize="24">
Code Writeable true textboxName.fontSize = 24
Code Readable true let variable = textboxName.fontSize

fontTypeface
  The text font face of the TextBox. Valid values are 0 (default), 1 (serif), 2 (sans serif), or 3 (monospace).
Data type: string
Designer Writable true <textbox name="textboxName" fontTypeface="monospace">
Code Writeable false
Code Readable false

height
  Specifies the TextBox's vertical height, measured in pixels.
Data type: number
Designer Writable false
Code Writeable true textboxName.height = 65
Code Readable true let variable = textboxName.height

heightPercent
  Specifies the TextBox's vertical height as a percentage of the Screen's Height.
Data type: number
Designer Writable false
Code Writeable true textboxName.heightPercent = 25
Code Readable false

hint
  TextBox hint for the user.
Data type: string
Designer Writable true <textbox name="textboxName" hint="Test hint">
Code Writeable true textboxName.hint = "Test hint"
Code Readable true let variable = textboxName.hint

multiLine
  If true, then this TextBox accepts multiple lines of input, which are entered using the return key. For single line text boxes there is a Done key instead of a return key, and pressing Done hides the keyboard. The app should call the HideKeyboard method to hide the keyboard for a mutiline text box.
Data type: boolean
Designer Writable true <textbox name="textboxName" multiLine="true">
Code Writeable true textboxName.multiLine = true
Code Readable true let variable = textboxName.multiLine

numbersOnly
  If true, then this TextBox`` accepts only numbers as keyboard input. Numbers can include a decimal point and an optional leading minus sign. This applies to keyboard input only. Even if NumbersOnly is true, you can set the text to anything at all using the [Text`](#TextBox.Text) property.
Data type: boolean
Designer Writable true <textbox name="textboxName" numbersOnly="true">
Code Writeable true textboxName.numbersOnly = true
Code Readable true let variable = textboxName.numbersOnly

readOnly
  Whether the TextBox is read-only. By default, this is true.
Data type: boolean
Designer Writable true <textbox name="textboxName" readOnly="false">
Code Writeable true textboxName.readOnly = false
Code Readable true let variable = textboxName.readOnly

text
  The text in the TextBox, which can be set by the programmer in the Designer or Blocks Editor, or it can be entered by the user (unless the Enabled property is false).
Data type: string
Designer Writable true <textbox name="textboxName" text="Test text">
Code Writeable true textboxName.text = "Test text"
Code Readable true let variable = textboxName.text

textAlignment
  Specifies the alignment of the TextBox's text. Valid values are 'left', 'right' and 'center'.
Data type: string
Designer Writable true <textbox name="textboxName" textAlignment="center">
Code Writeable false
Code Readable false

textColor
  Specifies the text color of the TextBox as an red-green-blue-alpha RRGGBBAA or red-green-blue RRGGBB string.
Data type: color
Designer Writable true <textbox name="textboxName" textColor="FF32844c">
Code Writeable true textboxName.textColor = "FF32844c"
Code Readable true let variable = textboxName.textColor

visible
  Specifies whether the TextBox should be visible on the screen. Value is true if the TextBox is showing and false if hidden.
Data type: boolean
Designer Writable true <textbox name="textboxName" visible="true">
Code Writeable true textboxName.visible = true
Code Readable true let variable = textboxName.visible

width
  Specifies the horizontal width of the TextBox, measured in pixels.
Data type: number
Designer Writable false
Code Writeable true textboxName.width = 213
Code Readable true let variable = textboxName.width

widthPercent
  Specifies the horizontal width of the TextBox as a percentage of the Screen's Width.
Data type: number
Designer Writable false
Code Writeable true textboxName.widthPercent = 84
Code Readable false

class
  The styling class of the the component
Data type: string
Designer Writable true <textbox name="textboxName" class="Test class">
Code Writeable false
Code Readable false

id
  The styling id of the the component
Data type: string
Designer Writable true <textbox name="textboxName" id="Test id">
Code Writeable false
Code Readable false

name
  The name of the component that will be used to refer to it in code.
Data type: string
Designer Writable true <textbox name="textboxName" name="testComponent">
Code Writeable false
Code Readable false

Methods

Method name Description Parameters
hideKeyboard Hide the keyboard. Only multiline text boxes need this. Single line text boxes close the keyboard when the users presses the Done key.
textboxName.hideKeyboard()
requestFocus Request focus to current TextBox.
textboxName.requestFocus()
addEventListener Method used to create event listeners.
See Events below for samples.
eventName string
eventCallbackFunction callback

Events

Event name Description Parameters
gotFocus Event raised when the TextBox is selected for input, such as by the user touching it.
textboxName.addEventListener(
    "gotFocus",
    function () {
        //Your code here
    }
)
lostFocus Event raised when the TextBox is no longer selected for input, such as if the user touches a different text box.
textboxName.addEventListener(
    "lostFocus",
    function () {
        //Your code here
    }
)