Construct 3 icon

Construct 3

Documentation

Text input

Published 23 Aug, 2017
919 words
~4-6 mins

The Text input object is a form control providing a text field the user can type text in to. This is used for getting data from the user; don't confuse it with the Text object, which is for displaying text.

Form controls are actual HTML elements floating above the game canvas in the 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 Text Input objects

Text Input 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 Text Input 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"

Text Input 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.

Initially visibile

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 disabled, 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 text content

  • Password: any content but characters hidden

  • Email: intended for strings in the format of an email, e.g. joe@bloggs.com

  • Number: numerical digits only

  • Telephone number: telephone number characters only

  • URL: web addresses in the general format https://example.com

  • Textarea: a multi-line text input, usually displayed with a monospace font

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. Disable 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.

Text input 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.

Text input actions

Set CSS style

Set a CSS (Cascading Style Sheets) style on the Text Input element. For more information, see the section Styling Text input objects. Note that if the Auto font size property is enabled, 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.

Text Input expressions

Text

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