TextInput

Extends Widget

A widget that allows to enter text.

Import this type with “const {TextInput} = require('tabris');”

Android	iOS

Properties

alignment

iOSAndroid

Type: string, supported values: left, right, center, default: left

The horizontal alignment of the text.

autoCapitalize

iOSAndroid

Type: boolean, default: false

Automatically switch to capital letters after every key pressed.

autoCorrect

Type: boolean, default: false

Enables the spell checker and auto-correction feature.

borderColor

iOSAndroid

Type: Color

The color of the border of the TextInput. On iOS this is a rectangular border around the TextInput, on Android it is a single line below the TextInput.

editable

Type: boolean, default: true

Whether the text can be edited or not.

enterKeyType

Type: string, supported values: default, done, next, send, search, go, default: default

Label or icon to display on the keyboard ‘confirmation’ key. The key press can be captured via the accept event. Setting an enterKeyType other than default will change the key behavior to not close the keyboard automatically. The developer is able close the keyboard by removing the focus from the TextInput.

fillColor

iOS

Type: Color

The color of the background of the TextInput - applies only to iOS.

focused

Type: boolean, default: false

Reflects whether this widget has the keyboard focus. Setting this property to true will focus the widget and open the virtual keyboard, setting it to false will remove the focus and hide the virtual keyboard.

keepFocus

iOSAndroid

Type: boolean, default: false

When true the TextInput will keep its focus, even when tapped outside of the widget bounds.

keyboard

Type: string, supported values: ascii, decimal, email, number, numbersAndPunctuation, phone, url, default, default: default

Selects the keyboard type to use for editing this widget. Has no effect when type is set to multiline.

message

Type: string

A hint text that is displayed when the input field is empty. Does not apply on iOS when type is set to multiline.

text

Type: string

The text in the input field.

textColor

Type: Color

The color of the text.

type

Type: string, supported values: default, password, search, multiline, default: default

The type of the text widget. Windows 10 currently interprets search as default.
This property can only be set on widget creation. Once set, it cannot be changed anymore.

Events

accept

Fired when a text input has been finished by pressing the keyboard’s Enter key. The label of this key may vary depending on the platform and locale.

Event Parameters

• target: this The widget the event was fired on.

• text: string The current value of text.

alignmentChanged

Fired when the alignment property has changed.

Event Parameters

• target: this The widget the event was fired on.

• value: string The new value of alignment.

autoCapitalizeChanged

Fired when the autoCapitalize property has changed.

Event Parameters

• target: this The widget the event was fired on.

• value: boolean The new value of autoCapitalize.

autoCorrectChanged

Fired when the autoCorrect property has changed.

Event Parameters

• target: this The widget the event was fired on.

• value: boolean The new value of autoCorrect.

blur

Fired when the widget lost focus.

borderColorChanged

Fired when the borderColor property has changed.

Event Parameters

• target: this The widget the event was fired on.

• value: Color The new value of borderColor.

editableChanged

Fired when the editable property has changed.

Event Parameters

• target: this The widget the event was fired on.

• value: boolean The new value of editable.

enterKeyTypeChanged

Fired when the enterKeyType property has changed.

Event Parameters

• target: this The widget the event was fired on.

• value: string The new value of enterKeyType.

fillColorChanged

Fired when the fillColor property has changed.

Event Parameters

• target: this The widget the event was fired on.

• value: Color The new value of fillColor.

focus

Fired when the widget gains focus.

focusedChanged

Fired when the focused property has changed.

Event Parameters

• target: this The widget the event was fired on.

• value: boolean The new value of focused.

input

Fired when the text was changed by the user.

Event Parameters

• target: this The widget the event was fired on.

• text: string The new value of text.

keepFocusChanged

Fired when the keepFocus property has changed.

Event Parameters

• target: this The widget the event was fired on.

• value: boolean The new value of keepFocus.

keyboardChanged

Fired when the keyboard property has changed.

Event Parameters

• target: this The widget the event was fired on.

• value: string The new value of keyboard.

messageChanged

Fired when the message property has changed.

Event Parameters

• target: this The widget the event was fired on.

• value: string The new value of message.

textChanged

Fired when the text property changes.

Event Parameters

• target: this The widget the event was fired on.

• value: string The new value of the text property.

textColorChanged

Fired when the textColor property has changed.

Event Parameters

• target: this The widget the event was fired on.

• value: Color The new value of textColor.

Example

const {TextInput, TextView, ui} = require('tabris');

// Create a text input field with input finished listener

new TextInput({
  top: 20, left: '20%', right: '20%',
  message: 'Type here, then confirm'
}).on('accept', ({text}) => {
  new TextView({
    top: 'prev() 20', left: '20%',
    text: text
  }).appendTo(ui.contentView);
}).appendTo(ui.contentView);

See also

• Simple TextInput snippet
• Example with Text and other input controls