Text Field

A Text Field is a component that allows editing a single line of text.

Public Variables (Properties)

[?]

Common Variables: Name, Visible, Breakpoint, Grid Width, Grid Height, Content Overflow, Container Style, Custom Classes, Style, Preloader, Component Bindings.

Text

Text contained in the text field.

Variable Name:

text

Records:

1

Record Format:

Field Name

Field Type

Field Description

text

String

Text

Placeholder

A message displayed when there is no other text in the text field.

Variable Name:

placeholder

Records:

1

Record Format:

Field Name

Field Type

Field Description

placeholder

String

Placeholder

Input Mask

Allows an input mask to be defined using the characters 9, a, and *.

  • 9specifies input for a single digit

  • a specifies input for a single letter

  • * specifies input for a single digit or a single letter.

An input mask may contain other static characters. For example, a mask for a telephone number might be defined with the following:

+9 (999) 999-9999

Which will appear to the user as:

+_ () -

The user can then enter any digit into the placeholders indicated by an underscore.

In the case that one of the placeholders needs to be used as a static indicator then the special character can be escaped with the backslash character \. For example, suppose the text field is for entering a serial number that always starts with the combination 9a8-, then the input mask can be entered as 

\9\a\*-9999999

Which will appear to the user as:

9a*-_

This mask would allow the user to enter any seven-digit number after the characters 9a*.

Variable Name:

inputMask

Records:

1

Record Format:

Field Name

Field Type

Field Description

inputMask

String

Input Mask

Left Icon

The image displayed to the left of the text, inside the input field.

Variable Name:

leftIcon

Records:

1

Record Format:

Field Name

Field Type

Field Description

imageType

Integer

Choose whether to use data from the imageData field or the imageURL field.

  • 0 - Image Data

  • 1 - URL

imageData

Data Block

Image data.

imageUrl

String

Image URL.

Right Icon

The image displayed to the right of the text, inside the input field.

Variable Name:

rightIcon

Records:

1

Record Format:

Field Name

Field Type

Field Description

imageType

Integer

Choose whether to use data from the imageData field or the imageURL field.

  • 0 - Image Data

  • 1 - URL

imageData

Data Block

Image data.

imageUrl

String

Image URL.

Use Key Up

If enabled, the component will generate a keyUp event containing current input data every time user releases keyboard button.

Variable Name:

useKeyUp

Records:

1

Record Format:

Field Name

Field Type

Field Description

useKeyUp

Boolean

Use Key Up

Key Up Delay

Defines the delay between releasing a keyboard button and keyUp event generation. If any other button is pressed within this time window, no event will be generated and this delay will be counted down again.  

Variable Name:

keyUpDelay

Records:

1

Record Format:

Field Name

Field Type

Field Description

keyUpDelay

Integer

Key Up Delay

Maximum Length

The maximum number of characters that can be entered in the text field.

Variable Name:

maxLength

Records:

1

Record Format:

Field Name

Field Type

Field Description

maxLength

Integer

Maximum Length

Disabled

This flag indicates the component is active. Disabled components do not respond to user input, and are rendered as grayed-out.

Variable Name:

disabled

Records:

1

Record Format:

Field Name

Field Type

Field Description

disabled

Boolean

Disabled

Input Type

Defines the type of input field. This property has a few selection values:

  • Search - adds the Search icon to the input field. All entered text will be displayed in normal way

  • Text - all entered text will be displayed in normal way

  • Password - all entered text will be hidden behind asterisks

Variable Name:

inputType

Records:

1

Record Format:

Field Name

Field Type

Field Description

inputType

String

Input Type

Use Clear Icon

If enabled, adds the Clear button which appears only if any text is entered.

Variable Name:

addClearIcon

Records:

1

Record Format:

Field Name

Field Type

Field Description

addClearIcon

Boolean

Use Clear Icon

Image Container Style

The CSS Style to be applied to the container of the image.

Variable Name:

iconsStyle

Records:

1

Record Format:

Field Name

Field Type

Field Description

iconsStyle

Boolean

Image Container Style

Validators

This property allows to define validators for the input field.

Variable Name:

validators

Records:

0...unlimited

Record Format:

Field Name

Field Type

Field Description

validatorType

String

Type. Type of the validator. This property has a few selection values:

  • Non-null Validator - entered data cannot be null i.e. at least one character must be entered;

  • Limits Validator - entered data must comply with the limit specified in the options field. E.g. "0, 100" (without quotes) value restricts any inputs less then 0 and greater than 100;

  • Regex Validator - entered data must comply with the Regex expression specified in the options field.

options

String

Options. Additional options for selected validator type.

message

String

Message. The message displaying if entered character matches current validator.

Valid By Default

Defines the component's default state. If disabled, the component will be displayed with an invalid input state by default.

Variable Name:

componentValid

Records:

1

Record Format:

Field Name

Field Type

Field Description

componentValid

Boolean

Valid By Default

Public Events

[?]

Common Events: Input Changed

Was this page helpful?