Textbox

The Textbox object creates a text field which the user can type text in to.

Form controls are actual HTML elements floating above the game canvas in the HTML page. Therefore, nothing can be displayed on top of a form control, apart from other form controls.

Form controls position themselves according to the layer parallax, scale and so on. However they are not truly "in the game" (since they float above), so it is recommended to avoid using scrolling, parallax and layer scaling with form controls, otherwise the end result can feel unnatural.

Styling Textbox objects

Textbox controls can be customised in a huge number of ways via CSS (Cascading Style Sheets). Rather than adding actions to set all of the possible properties, the Textbox object exposes a Set CSS style action. Knowing CSS will of course be an advantage here, but it is simple to use for simple properties. A few examples are listed below.

Make the text red: Set "color" to "red"
Make the background yellow: Set "background-color" to "yellow"
Make the border a thick light grey: Set "border" to "3px solid #AAAAAA"
Make the font bigger: Set "font-size" to "2em"
Make a dashed red border: Set "border" to "2px dashed red"

Textbox properties

Text
The initial text entered in to the field.

Placeholder
Some text that appears faintly when the field is empty. This can be used for hints for what the field is for, e.g. Username.

Tooltip
A tooltip that appears if the user hovers the mouse over the text box and waits. Leave blank for no tooltip.

Initial visibility
Whether or not the text box is shown on startup. If Invisible, the field must be shown with the Set visible action.

Enabled
Whether the text box is initially enabled. If No, the field will be greyed out and cannot be modified.

Read-only
Set whether the field is read-only, which means the text cannot be modified but can still be selected. This is different to disabling the field, where text cannot be selected.

Spell check
Enable spell-checking on the text entered in to the field, if the browser supports it. If enabled, spelling errors are underlined with a squiggly red line.

Type
Set the type of content being entered in to the text field, which can be:
Text (any content)
Password (any content but characters hidden)
Email (intended for strings in the general format [email protected])
Number (numerical digits only)
Telephone number (telephone number characters only)
URL (web addresses in the general format http://example.com).
Textarea (multi-line text input)
The email, number, telephone number and URL types are generally most useful for mobile devices, since they change which type of on-screen keyboard appears when the field is focused. For example, Text will show a general purpose on-screen keyboard, whereas Number may show a simple number pad, making it more convenient for the user to enter the content.

Auto font size
Automatically set the font-size property of the element according to the layout and layer scale. This will prevent the font-size CSS property being manually set with the Set CSS style action. Set to No if you intend to use Set CSS style to adjust the font-size property.

ID (optional)
An optional id attribute for the element in the DOM (Document Object Model). This can be useful for accessing the element's value from external scripts, or styling with CSS in the HTML page.

Textbox conditions

Compare text
Compare the text currently entered in to the field. The comparison can either be case sensitive ("TEXT" is different to "text") or case insensitive ("TEXT" is the same as "text").

On clicked
Triggered when the user clicks the field.

On double-clicked
Triggered when the user double-clicks the field.

On text changed
Triggered whenever the text in the field is modified, by typing, backspace/delete, cut/paste etc.

Textbox actions

Set CSS style
Set a CSS (Cascading Style Sheets) style on the Textbox element. For more information, see the section Styling Textbox objects. Note that if the Auto font size property is set to Yes, any changes to the font-size property will be overridden.

Scroll to bottom
Scroll to the bottom of the control. Only has an effect when set to the textarea type, since it is the only multiline mode. This is useful for chat or log style textareas.

Set enabled
Set the field enabled or disabled. When disabled, the field appears greyed out and cannot be modified.

Set focused
Set the input focus to the field. The text caret will begin flashing ready for text entry.

Set placeholder
Set the text that appears faintly when the field is empty. This can be used for hints for what the field is for, e.g. Username.

Set read-only
Set whether the field is read-only, which means the text cannot be modified but can still be selected. This is different to disabling the field, where text cannot be selected.

Set text
Set the text currently entered in to the field.

Set tooltip
Set the text that appears for the field tooltip. Leave blank for no tooltip.

Set unfocused
Remove the input focus from the field.

Textbox expressions

Text
Get a string containing the text currently entered in to the field.

Tags: