# Titanium.UI.TextArea
A multiline text field that supports editing and scrolling.
# Overview
Android | iOS | Windows |
---|---|---|
Use the Titanium.UI.createTextArea method or <TextArea> Alloy element to create a text area.
# click
event in iOS
In iOS 11+, click
event in text area is not fired due to changes from apple.
Use touchstart
event instead of click
event.
# Examples
# Basic Text Area with Customizations
This example creates a highly customized text area.
var win = Ti.UI.createWindow({
backgroundColor: 'white'
});
var textArea = Ti.UI.createTextArea({
borderWidth: 2,
borderColor: '#bbb',
borderRadius: 5,
color: '#888',
font: {fontSize:20, fontWeight:'bold'},
keyboardType: Ti.UI.KEYBOARD_NUMBER_PAD,
returnKeyType: Ti.UI.RETURNKEY_GO,
textAlign: 'left',
value: 'I am a textarea',
top: 60,
width: 300, height : 70
});
win.add(textArea);
win.open();
# Text Area with Custom Keyboard Toolbar (iOS)
On iOS, a configurable toolbar can be displayed above the virtual keyboard. Toolbars can be used with both text areas and text fields. See Titanium.UI.iOS.Toolbar for more information.
This code excerpt creates a text area with a toolbar:
Example using a custom keyboard toolbar:
var send = Ti.UI.createButton({
style : Ti.UI.iOS.SystemButtonStyle.DONE,
title : 'Send'
});
var camera = Ti.UI.createButton({
systemButton : Ti.UI.iOS.SystemButton.CAMERA
});
var cancel = Ti.UI.createButton({
systemButton : Ti.UI.iOS.SystemButton.CANCEL
});
var flexSpace = Ti.UI.createButton({
systemButton : Ti.UI.iOS.SystemButton.FLEXIBLE_SPACE
});
var textarea = Ti.UI.createTextArea({
borderColor : '#000',
color : '#000',
keyboardToolbar : [cancel, flexSpace, camera, flexSpace, send],
keyboardToolbarColor : '#999',
keyboardToolbarHeight : 40,
value : 'Focus to see keyboard with toolbar',
top : 10,
width : 300, height : 120
});
# Alloy XML Markup
Previous basic text area with customizations example as an Alloy view.
<Alloy>
<Window id="win" backgroundColor="white">
<TextArea id="textArea"
borderWidth="2" borderColor="#bbb" borderRadius="5"
color="#888" textAlign="left" value="I am a textarea"
top="60" width="300" height="70" />
</Window>
</Alloy>
# Properties
# appearance DEPRECATED
DEPRECATED SINCE 5.2.0
Use keyboardAppearance instead.
Determines the appearance of the keyboard displayed when this text area is focused.
Default: Titanium.UI.KEYBOARD_APPEARANCE_DEFAULT
# attributedHintText
Hint text attributed string.
The attributed hint text by the text area. If set, avoid setting common attributes
in text area, such as hintText
, color
and font
, as unexpected behaviors may result.
This has no effect when used with hintType
Ti.UI.HINT_TYPE_ANIMATED.
Prior to Release 3.6.0, assign this property an object from the <Titanium.UI.iOS.AttributedString> class.
Since Appcelerator CLI 4.1.0 (Alloy 1.7.0), for Alloy, you can use an <AttributedHintText>
element inside a <TextField>
element and set the text property as node text:
<Alloy>
<Window>
<TextField>
<AttributedHintText>
Alloy is great!
</AttributedHintText>
</TextField>
</Window>
</Alloy>
Then set attributes in the TSS file:
"AttributedString" : {
attributes: [
{
type: Ti.UI.ATTRIBUTE_FOREGROUND_COLOR,
value: 'red',
range: [0, 5]
},
{
type: Ti.UI.ATTRIBUTE_UNDERLINES_STYLE,
value: Ti.UI.ATTRIBUTE_UNDERLINE_STYLE_SINGLE,
range: [9, 5]
}
]
}
# attributedString
TextArea attributed string.
The underlying attributed string drawn by the textArea. If set, avoid setting common attributes
in textArea, such as value
, color
and font
, as unexpected behaviors may result.
Prior to Release 3.6.0, assign this property an object from the <Titanium.UI.iOS.AttributedString> class.
Since Appcelerator CLI 4.1.0 (Alloy 1.7.0), for Alloy, you can use an <AttributedString>
element inside a <TextArea>
element and set the text property as node text:
<Alloy>
<Window>
<TextArea>
<AttributedString>
Alloy is great!
</AttributedString>
</TextArea>
</Window>
</Alloy>
Then set attributes in the TSS file:
"AttributedString" : {
attributes: [
{
type: Ti.UI.ATTRIBUTE_FOREGROUND_COLOR,
value: 'red',
range: [0, 5]
},
{
type: Ti.UI.ATTRIBUTE_UNDERLINES_STYLE,
value: Ti.UI.ATTRIBUTE_UNDERLINE_STYLE_SINGLE,
range: [9, 5]
}
]
}
# autocapitalization
Determines how text is capitalized during typing.
Default: Titanium.UI.TEXT_AUTOCAPITALIZATION_NONE
# autocorrect
Determines whether to automatically correct text entered into this text area.
Set to true
to enable automatic spelling correction. On iOS 9+, this can be used to disable QuickType suggestions.
If this property is not explicitly defined, it behaves as though it were set to true
.
On Android and iOS, the returned default value is undefined, but behave as if the value is true
.
# autofillType
Sets the autofill type for the text area.
This sets the hint or content type to aid the autofill feature of iOS and Android to function.
- Titanium.UI.AUTOFILL_TYPE_USERNAME
- Titanium.UI.AUTOFILL_TYPE_PASSWORD
- Titanium.UI.AUTOFILL_TYPE_NAME
- Titanium.UI.AUTOFILL_TYPE_NAME_PREFIX
- Titanium.UI.AUTOFILL_TYPE_GIVEN_NAME
- Titanium.UI.AUTOFILL_TYPE_MIDDLE_NAME
- Titanium.UI.AUTOFILL_TYPE_FAMILY_NAME
- Titanium.UI.AUTOFILL_TYPE_NAME_SUFFIX
- Titanium.UI.AUTOFILL_TYPE_NICKNAME
- Titanium.UI.AUTOFILL_TYPE_JOB_TITLE
- Titanium.UI.AUTOFILL_TYPE_ORGANIZATION_NAME
- Titanium.UI.AUTOFILL_TYPE_LOCATION
- Titanium.UI.AUTOFILL_TYPE_ADDRESS
- Titanium.UI.AUTOFILL_TYPE_ADDRESS_LINE1
- Titanium.UI.AUTOFILL_TYPE_ADDRESS_LINE2
- Titanium.UI.AUTOFILL_TYPE_ADDRESS_CITY
- Titanium.UI.AUTOFILL_TYPE_ADDRESS_STATE
- Titanium.UI.AUTOFILL_TYPE_ADDRESS_CITY_STATE
- Titanium.UI.AUTOFILL_TYPE_SUBLOCALITY
- Titanium.UI.AUTOFILL_TYPE_COUNTRY_NAME
- Titanium.UI.AUTOFILL_TYPE_POSTAL_CODE
- Titanium.UI.AUTOFILL_TYPE_PHONE
- Titanium.UI.AUTOFILL_TYPE_EMAIL
- Titanium.UI.AUTOFILL_TYPE_URL
- Titanium.UI.AUTOFILL_TYPE_CARD_NUMBER
- Titanium.UI.AUTOFILL_TYPE_CARD_SECURITY_CODE
- Titanium.UI.AUTOFILL_TYPE_CARD_EXPIRATION_DATE
- Titanium.UI.AUTOFILL_TYPE_CARD_EXPIRATION_DAY
- Titanium.UI.AUTOFILL_TYPE_CARD_EXPIRATION_MONTH
- Titanium.UI.AUTOFILL_TYPE_CARD_EXPIRATION_YEAR
- Titanium.UI.AUTOFILL_TYPE_NEW_PASSWORD
- Titanium.UI.AUTOFILL_TYPE_ONE_TIME_CODE
Default: undefined
# autoLink
Automatically convert text to clickable links.
iOS supports an additional autolink type, AUTOLINK_CALENDAR.
Multiple autolink values can be combined with a bitwise OR. For example:
textArea.autoLink = Ti.UI.AUTOLINK_MAP_ADDRESSES|Ti.UI.AUTOLINK_PHONE_NUMBERS;
Prior to Release 3.0, this field used platform-specific constants. These are now
deprecated in favor of the AUTOLINK
constants.
On Android, the LINKIFY
legacy constants are defined in Titanium.UI.Android.
On iOS, the AUTODETECT
legacy constants are defined in Titanium.UI.iOS.
Default: Titanium.UI.AUTOLINK_NONE
# borderStyle CREATION ONLY
Border style for the text area.
Default: Titanium.UI.INPUT_BORDERSTYLE_FILLED
# clearOnEdit
Determines whether the value of this text area should be cleared when it is focused.
Default: false
# color
Color of the text in this text area, as a color name or hex triplet.
For information about color values, see the "Colors" section of Titanium.UI.
# ellipsize
Determines whether an ellipsis (...
) should be used to indicate truncated text.
Default: false
# enableCopy
Determines if user can copy or cut text from the text area.
When set false
, the "copy" and "cut" options will not appear in the context menu.
The Command+C
and Command+X
keyboard shortcuts will be ignored as well.
Default: true
# enableReturnKey
Determines whether the return key is enabled automatically when there is text in this text area.
If true
, the return key is disabled when this text area is empty, and
automatically enabled as soon as the user types any text in the area.
Default: false
# fullscreen
Leave some space above the keyboard in landscape mode or not.
Switch between a fullscreen keyboard in landscape mode (default) or a non-fullscreen keyboard which will leave some space to display UI elements.
Default: true
# handleLinks
Specifies if the text area should allow user interaction with the given URL in the given range of text.
When the text is specified using an attributed string and the text has an attribute of type ATTRIBUTE_LINK, this property controls if the system should handle that link automatically.
Default: false
# hintText
Hint text to display when the field is empty.
Hint text is hidden when the user enters text into this text area.
Use the backslash and letter n
line feed character combination, ie \n
, to force a new
line.
Use unicode characters, such as those included in (but not limited to) the Unicode List of Useful Symbols section of wikipedia, to insert special characters and symbols.
Default: No hint text.
# hintTextColor
Color of hint text that displays when field is empty.
Hint text color in Android is determined by the theme of the application. By default, a Titanium app uses a Dark theme. When you create the background to be white, the hint text color would also be white, hence not visible to the user. To change this, you can edit the "tiapp.xml" file with another theme. Example as follows:
<android xmlns:android="http://schemas.android.com/apk/res/android">
<manifest>
<application android:theme="@style/Theme.MaterialComponents.Light.Bridge"/>
</manifest>
</android>
Another way to change the hint text color is to use this property and specify a color.
This has no effect when used with hintType
Ti.UI.HINT_TYPE_ANIMATED. Instead a theme must be
used that defines the android:textColorHint
attribute.
Default: Default Android theme's hint text color.
# hintType
Hint type to display on the text field.
Setting this to HINT_TYPE_ANIMATED will use the animated TextInputLayout on Android.
Default: Titanium.UI.HINT_TYPE_STATIC
# keyboardAppearance
Determines the appearance of the keyboard displayed when this text area is focused.
Default: Titanium.UI.KEYBOARD_APPEARANCE_DEFAULT
# keyboardToolbar
Array of toolbar button objects or a Titanium.UI.Toolbar to be used when the keyboard is displayed.
As of Release 2.0, because iOS disallows a view (including toolbar buttons) to be in two places at once, developers desiring textAreas or Titanium.UI.TextField to share a toolbar can instead use a single Titanium.UI.Toolbar instead of having arrays sharing toolbar buttons.
# keyboardToolbarColor
Color of the keyboard toolbar if keyboardToolbar is an array, as a color name or hex triplet.
For information about color values, see the "Colors" section of Titanium.UI.
# keyboardToolbarHeight
Height of the keyboard toolbar if keyboardToolbar is an array.
# keyboardType
Keyboard type to display when this text area is focused.
When asking for a specific kind of user input, such as a phone number or email address, you should always specify the appropriate keyboard type.
- Titanium.UI.KEYBOARD_APPEARANCE_ALERT
- Titanium.UI.KEYBOARD_APPEARANCE_DEFAULT
- Titanium.UI.KEYBOARD_APPEARANCE_DARK
- Titanium.UI.KEYBOARD_APPEARANCE_LIGHT
- Titanium.UI.KEYBOARD_ASCII
- Titanium.UI.KEYBOARD_DECIMAL_PAD
- Titanium.UI.KEYBOARD_DEFAULT
- Titanium.UI.KEYBOARD_EMAIL
- Titanium.UI.KEYBOARD_NAMEPHONE_PAD
- Titanium.UI.KEYBOARD_NUMBERS_PUNCTUATION
- Titanium.UI.KEYBOARD_NUMBER_PAD
- Titanium.UI.KEYBOARD_PHONE_PAD
- Titanium.UI.KEYBOARD_URL
- Titanium.UI.KEYBOARD_TYPE_DECIMAL_PAD
- Titanium.UI.KEYBOARD_TYPE_ASCII
- Titanium.UI.KEYBOARD_TYPE_DEFAULT
- Titanium.UI.KEYBOARD_TYPE_EMAIL
- Titanium.UI.KEYBOARD_TYPE_NAMEPHONE_PAD
- Titanium.UI.KEYBOARD_TYPE_NUMBERS_PUNCTUATION
- Titanium.UI.KEYBOARD_TYPE_NUMBER_PAD
- Titanium.UI.KEYBOARD_TYPE_PHONE_PAD
- Titanium.UI.KEYBOARD_TYPE_WEBSEARCH
- Titanium.UI.KEYBOARD_TYPE_TWITTER
- Titanium.UI.KEYBOARD_TYPE_URL
Default: Titanium.UI.KEYBOARD_DEFAULT
# lines
Number of lines tall the text area height will be, if set.
Sets the height of the text area by line height. Set to -1 to respect the view's height property instead.
Default: 1
# maxLength
Maximum length of text field input.
Any attempt to input text beyond this length (including pasting a string larger than maxLength
) will not edit the field's contents. A value of -1 indicates unlimited length.
Default: -1
# maxLines
Maximum line count of text field input.
Sets the maximum of lines that the field will be extended to when pressing Return
.
Default: -1
# padding
Sets the left and right padding of this TextArea. The text will always be vertically centered.
# returnKeyType
Specifies the text to display on the keyboard Return
key when this text area is focused.
- Titanium.UI.RETURNKEY_CONTINUE
- Titanium.UI.RETURNKEY_DEFAULT
- Titanium.UI.RETURNKEY_DONE
- Titanium.UI.RETURNKEY_EMERGENCY_CALL
- Titanium.UI.RETURNKEY_GO
- Titanium.UI.RETURNKEY_GOOGLE
- Titanium.UI.RETURNKEY_JOIN
- Titanium.UI.RETURNKEY_NEXT
- Titanium.UI.RETURNKEY_ROUTE
- Titanium.UI.RETURNKEY_SEARCH
- Titanium.UI.RETURNKEY_SEND
- Titanium.UI.RETURNKEY_YAHOO
Default: Titanium.UI.RETURNKEY_DEFAULT
# scrollsToTop
Controls whether the scroll-to-top gesture is effective.
The scroll-to-top gesture is a tap on the status bar; The default value of this property is true. This gesture works when you have a single visible text area. If there are multiple table views, web views, text areas, and/or scroll views visible, you will need to disable (set to false) on the above views you DON'T want this behaviour on. The remaining view will then respond to scroll-to-top gesture.
Default: true
# selection READONLY
Returns the currently selected text of the text area.
This property is useful to track the current cursor position of the text area. On iOS this property can be used in lieu of the selected event.
This method will return null on android and undefined on iOS if the view has not yet been attached to the window.
# showUndoRedoActions
Determinates if the undo and redo buttons on the left side of the keyboard should be displayed or not. Only valid on iOS9 and above. This property can only be set upon creation.
Default: true
# suppressReturn
Determines if the return key should be suppressed during text entry.
# textAlign
Text alignment within this text area.
This has no effect on hintText
when hintType
is Ti.UI.HINT_TYPE_ANIMATED.
Default: Titanium.UI.TEXT_ALIGNMENT_LEFT
# value
Value of this text area, which may be set programmatically and modified by the user.
Use the backslash and letter n
line feed character combination, ie \n
, to force a new
line.
Use unicode characters, such as those included in (but not limited to) the Unicode List of Useful Symbols section of wikipedia, to insert special characters and symbols.
# verticalAlign
Vertical alignment within this text area.
# Methods
# hasText
Returns true
if this text area contains text.
Returns
True if this text area contains text.
- Type
- Boolean
# setSelection
Selects the text in range (start, end).
Selects the text in range (start, end). If start equals end, no text will be selected, and the cursor will move to the start position. End is not inclusive, meaning setSelection(0,0) will not select the first character, but will move the cursor to the position before the first character.
On iOS, soft keyboard would show when text is selected.
Parameters
Name | Type | Description |
---|---|---|
start | Number | Start index for selection. Value ranges from 0 to the text's length. |
end | Number | End index for selection, not inclusive. Value ranges from 0 to the text's length. |
Returns
- Type
- void
# Events
# focus
Fired when this text area gains focus.
This event only fires when using the trackball to navigate.
Properties
Name | Type | Description |
---|---|---|
value | String | Value of this text area. |
source | Object | Source object that fired the event. |
type | String | Name of the event fired. |
bubbles | Boolean | True if the event will try to bubble up if possible. |
cancelBubble | Boolean | Set to true to stop the event from bubbling. |
# blur
Fired when this text area loses focus.
Properties
Name | Type | Description |
---|---|---|
value | String | Value of this text area. |
source | Object | Source object that fired the event. |
type | String | Name of the event fired. |
bubbles | Boolean | True if the event will try to bubble up if possible. |
cancelBubble | Boolean | Set to true to stop the event from bubbling. |
# change
Fired when this text area value changes.
Properties
Name | Type | Description |
---|---|---|
value | String | New value of this text area. |
source | Object | Source object that fired the event. |
type | String | Name of the event fired. |
bubbles | Boolean | True if the event will try to bubble up if possible. |
cancelBubble | Boolean | Set to true to stop the event from bubbling. |
# link
Fired when user interacts with a URL in the text area. See handleLinks.
The URL is set using the ATTRIBUTE_LINK property on the attributedString. This event is fired even in handleLinks is set to false. Only valid on iOS7 and above.
Properties
Name | Type | Description |
---|---|---|
url | String | The URL that is associated with this event. |
range | Array | An array of two numbers [location, length] describing the character range of the text associated with this URL. |
bubbles | Boolean | This is false. This event does not bubble. |
source | Object | Source object that fired the event. |
type | String | Name of the event fired. |
bubbles | Boolean | True if the event will try to bubble up if possible. |
cancelBubble | Boolean | Set to true to stop the event from bubbling. |
# return
Fired when the return key is pressed on the keyboard.
Properties
Name | Type | Description |
---|---|---|
value | String | Value of this text area. |
source | Object | Source object that fired the event. |
type | String | Name of the event fired. |
bubbles | Boolean | True if the event will try to bubble up if possible. |
cancelBubble | Boolean | Set to true to stop the event from bubbling. |
# selected
Fired when text in this text area is selected.
Properties
Name | Type | Description |
---|---|---|
range | textAreaSelectedParams | Dictionary that describes the position and length of the selected text. |
source | Object | Source object that fired the event. |
type | String | Name of the event fired. |
bubbles | Boolean | True if the event will try to bubble up if possible. |
cancelBubble | Boolean | Set to true to stop the event from bubbling. |