Text input

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.

HTML elements display on top

Most objects like Sprite draw on to a <canvas> element, which displays like a large image. Objects like Text Input are in fact HTML elements placed on top of the canvas rather than drawn on the canvas. Therefore, nothing can be displayed on top of it apart from other HTML elements. Using layers and Z order to adjust their layering inside Construct will have no effect.

HTML elements position themselves according to the layer parallax, scale and so on. However since they are not actually drawn into the canvas, it is recommended to avoid using scrolling, parallax and layer scaling with form controls, otherwise the end result can feel unnatural.

Styling text inputs

As Text Input objects are HTML elements, their appearance can be customised using CSS (Cascading Style Sheets). The ID and Class properties can be used to identify the HTML element, and a CSS project file added to apply some styles to it.

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

  • Search: text content intended as a search query


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

See common conditions for features shared between form control objects.

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

See common actions for features shared between form control objects.

Append text
Add some text to the end of the current text. For example, if the text object contains Hello and has World appended, the text object then contains HelloWorld.
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 max length
Set the maximum number of characters allowed to be entered in the field. Set to -1 to disable any limit and allow an unlimited number of characters (which is the default).
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.

Text Input expressions

MaxLength
Return the maximum number of characters allowed to be entered in to the field, as set by the Set max length action. If there is no maximum length (the default), this returns -1.
Text
Get a string containing the text currently entered in to the field.
Construct 3 Manual 2022-05-04