You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
An example of text area properties is represented in the image below:
21
+
The properties pane is divided into two major sections by a toggle at the top of the pane: **Properties** and **Styling**. Text area properties consist of the following sections:
{{% alert color="info" %}}The grow automatically property does not impact the behavior of native mobile pages. On iOS, the text area will always grow automatically
47
+
{{% /alert %}}
48
+
49
+
This property defines whether the text area grows automatically depending on the amount of text in it.
50
+
51
+
Default: *No*
52
+
53
+
#### 3.1.2 Number of Lines
54
+
55
+
**Number of lines** determines the size of the text area, based on the height of the lines. If the text in the text area contains more lines, a scroll bar will enable the end-user to see it all. This property is only used if **Grow automatically** is set to *No*.
56
+
57
+
Default: *5*
58
+
59
+
#### 3.1.3 Counter Message
60
+
61
+
{{% alert color="info" %}}Counter message is not supported on native mobile pages.{{% /alert %}}
62
+
63
+
This is the text displayed when typing in the text area. This text has two [parameters](/refguide/text/#parameters). The first parameter contains the number of characters already typed and the second parameter contains the maximum number of characters.
64
+
65
+
For example, if you use the counter message `You've used {1} characters of the {2} characters that are allowed.` for your text area, the end-user will see this message displayed below the text area widget:
{{% alert color="info" %}}Text too long message is not supported on native mobile pages.{{% /alert %}}
72
+
73
+
This is the text displayed when the number of characters is higher than the maximum allowed number of characters.
74
+
75
+
This type of message can also occur when a loaded or stored value exceeds the character limit
76
+
77
+
#### 3.1.5 Maximum Length
78
+
79
+
This property specifies the maximum number of characters that can be typed in this text area.
80
+
81
+
| Value | Description |
82
+
| --- | --- |
83
+
| Attribute length *(default)*| The maximum number of characters is the same as the maximum length of the connected attribute |
84
+
| Unlimited | The maximum number of characters is unlimited |
85
+
| Custom | The maximum number of characters is specified in the widget properties |
86
+
87
+
#### 3.1.6 Placeholder Text
88
+
89
+
The placeholder text is shown when no text has been entered yet, or when a displayed attribute is empty.
90
+
91
+
It can be used, for example, to give a hint to the end-user what kind of text should be entered.
92
+
93
+
#### 3.1.7 Autocomplete
94
+
95
+
The autocomplete property specifies if a text area should have autocomplete enabled. The autocomplete attribute also improves mobile devices' ability to pre-populate fields.
96
+
97
+
{{% alert color="info" %}}This option is only available in native pages.{{% /alert %}}
98
+
{{% alert color="info" %}}In Android when autocomplete is turned off it will remove support for new lines.{{% /alert %}}
99
+
100
+
#### 3.1.8 AutoFocus {#autofocus}
101
+
102
+
If `true`, the text area will be rendered focused with the device keyboard opened.
In a text area widget, when **Aria required** is set to **Yes** then assistive technologies will read out the field that is required. When set to **No** then assistive technologies will not read the field out.
The on change property specifies an action that will be executed when leaving the widget, either by using the <kbd>Tab</kbd> key or by clicking another widget after the value has been changed.
The on change behavior property lets users select how **on change** is handled in Studio Pro via the following options:
64
149
65
150
***When user leaves input field (Default)**
66
151
***While user is entering data**
67
152
68
-
##### 2.5.2.1 When User Leaves Input Field (Default)
153
+
##### 3.9.2.1 When User Leaves Input Field (Default)
69
154
70
155
Text area will apply changes when a value is different than a previously saved value in the database and the following condition is met:
71
156
72
157
* Blurred: this will trigger on change and on leave events
73
158
74
159
This means that there is no way for users to trigger an on change event while typing. To address that use case, please use the second option: [While user is entering data](#user-enters-data).
75
160
76
-
##### 2.5.2.2 While User is Entering Data {#user-enters-data}
161
+
##### 3.9.2.2 While User is Entering Data {#user-enters-data}
77
162
78
163
This option allows users to trigger an on change event while they are typing.
79
164
@@ -86,99 +171,57 @@ With **While user is entering data**, users can adjust one more property called
The on leave property specifies an action that will be executed when leaving the widget, either by using the <kbd>Tab</kbd> key or by clicking another widget.
98
183
99
184
This differs from the [on change](#on-change) property in that the event will always be triggered, even if the value has not been changed.
{{% alert color="info" %}}The grow automatically property does not impact the behavior of native mobile pages. On iOS, the text area will always grow automatically
108
-
{{% /alert %}}
192
+
The On Change Behavior property lets users select how **on change** is handled via the following options Studio Pro:
109
193
110
-
This property defines whether the text area grows automatically depending on the amount of text in it.
194
+
* When user leaves input field (Default)
195
+
* While user is entering data
111
196
112
-
Default: *No*
197
+
##### 3.10.1 When user leaves input field (Default)
113
198
114
-
#### 2.6.2 Number of Lines
199
+
This option will work as in previous versions of Studio Pro. Text area will apply changes when a value is not the same as previously saved value in the database and one of the following conditions is met:
115
200
116
-
**Number of lines** determines the size of the text area, based on the height of the lines. If the text in the text area contains more lines, a scroll bar will enable the end-user to see it all. This property is only used if **Grow automatically** is set to *No*.
201
+
* On enter key pressed: This will trigger on change and on enter key press events
202
+
* Blurred: This will trigger on change and on leave events
117
203
118
-
Default: *5*
204
+
This means that there is no way for users to trigger an on change event while typing. That use case requires the second option: **While user is entering data**.
119
205
120
-
####2.6.3 Counter Message
206
+
##### 3.10.2 While user is entering data
121
207
122
-
{{% alert color="info" %}}Counter message is not supported on native mobile pages.{{% /alert %}}
123
-
124
-
This is the text displayed when typing in the text area. This text has two [parameters](/refguide/text/#parameters). The first parameter contains the number of characters already typed and the second parameter contains the maximum number of characters.
208
+
This option allows makes it so users trigger an on change event while they are typing. Text area will save changes when the value is not the same as the previously saved value in the database and if the last change made took place after the configured **Apply after (ms)** length of time.
125
209
126
-
For example, if you use the counter message `You've used {1} characters of the {2} characters that are allowed.` for your text area, the end-user will see this message displayed below the text area widget:
210
+
With **While user is entering data**, users now can adjust one more property called **Apply after (ms)** (described above). This will reduce the amount of the calls made for an on change event, thus improving app performance.
{{% alert color="info" %}}Text too long message is not supported on native mobile pages.{{% /alert %}}
133
-
134
-
This is the text displayed when the number of characters is higher than the maximum allowed number of characters.
135
-
136
-
This type of message can also occur when a loaded or stored value exceeds the character limit
137
-
138
-
#### 2.6.5 Maximum Length
139
-
140
-
This property specifies the maximum number of characters that can be typed in this text area.
141
-
142
-
| Value | Description |
143
-
| --- | --- |
144
-
| Attribute length *(default)*| The maximum number of characters is the same as the maximum length of the connected attribute |
145
-
| Unlimited | The maximum number of characters is unlimited |
146
-
| Custom | The maximum number of characters is specified in the widget properties |
147
-
148
-
#### 2.6.6 Placeholder Text
149
-
150
-
The placeholder text is shown when no text has been entered yet, or when a displayed attribute is empty.
151
-
152
-
It can be used, for example, to give a hint to the end-user what kind of text should be entered.
153
-
154
-
#### 2.6.7 Autocomplete
155
-
156
-
The autocomplete property specifies if a text area should have autocomplete enabled. The autocomplete attribute also improves mobile devices' ability to pre-populate fields.
157
-
158
-
{{% alert color="info" %}}This option is only available in native pages.{{% /alert %}}
159
-
{{% alert color="info" %}}In Android when autocomplete is turned off it will remove support for new lines.{{% /alert %}}
160
-
161
-
#### 2.6.8 AutoFocus {#autofocus}
162
-
163
-
If `true`, the text area will be rendered focused with the device keyboard opened.
0 commit comments