1# TextArea
2
3多行文本输入框组件,当输入的文本内容超过组件宽度时会自动换行显示。
4
5高度未设置时,组件无默认高度,自适应内容高度。宽度未设置时,默认撑满最大宽度。
6
7>  **说明:**
8>
9>  该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
10
11
12## 子组件
13
1415
16
17## 接口
18
19TextArea(value?: TextAreaOptions)
20
21**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
22
23**系统能力:** SystemCapability.ArkUI.ArkUI.Full
24
25**参数:**
26
27| 参数名 | 类型 | 必填 | 说明 |
28| ----- | ----- | ---- | ---- |
29| value | [TextAreaOptions](#textareaoptions对象说明) | 否  | TextArea组件参数。 |
30
31## TextAreaOptions对象说明
32
33**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
34
35**系统能力:** SystemCapability.ArkUI.ArkUI.Full
36
37| 名称 | 类型  | 必填   | 说明 |
38| ---- | ----- | ---- | ---- |
39| placeholder      | [ResourceStr](ts-types.md#resourcestr)  | 否    | 设置无输入时的提示文本。输入内容后,提示文本不显示。<br/>仅设置placeholder属性时,手柄依然跟随拖动,手柄松开后光标停留在文字开头位置。     |
40| text             | [ResourceStr](ts-types.md#resourcestr)  | 否    | 设置输入框当前的文本内容。</br>建议通过onChange事件将状态变量与文本实时绑定,</br>避免组件刷新时TextArea中的文本内容异常。<br />从API version 10开始,该参数支持[$$](../../../quick-start/arkts-two-way-sync.md)双向绑定变量。 |
41| controller<sup>8+</sup> | [TextAreaController](#textareacontroller8) | 否    | 设置TextArea控制器。 |
42
43
44## 属性
45
46除支持[通用属性](ts-universal-attributes-size.md),还支持以下属性:
47
48>  **说明:**
49>
50>  [通用属性padding](ts-universal-attributes-size.md#padding)的默认值为:<br>{<br>&nbsp;top: '8vp',<br>&nbsp;right: '16vp',<br>&nbsp;bottom: '8vp',<br>&nbsp;left: '16vp'<br> }
51>
52>  从API version 11开始,多行输入框可设置.width('auto')使组件宽度自适应文本宽度,自适应时组件宽度受constraintSize属性以及父容器传递的最大最小宽度限制,其余使用方式参考[尺寸设置](ts-universal-attributes-size.md#属性)。
53
54### placeholderColor
55
56placeholderColor(value: ResourceColor)
57
58设置placeholder文本颜色。
59
60**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
61
62**系统能力:** SystemCapability.ArkUI.ArkUI.Full
63
64**参数:** 
65
66| 参数名 | 类型                                       | 必填 | 说明                                         |
67| ------ | ------------------------------------------ | ---- | -------------------------------------------- |
68| value  | [ResourceColor](ts-types.md#resourcecolor) | 是   | placeholder文本颜色。<br/>默认值:跟随主题。 |
69
70### placeholderFont
71
72placeholderFont(value: Font)
73
74设置placeholder文本样式,包括字体大小,字体粗细,字体族,字体风格。当前支持'HarmonyOS Sans'字体和[注册自定义字体](../js-apis-font.md)。
75
76**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
77
78**系统能力:** SystemCapability.ArkUI.ArkUI.Full
79
80**参数:** 
81
82| 参数名 | 类型                     | 必填 | 说明                  |
83| ------ | ------------------------ | ---- | --------------------- |
84| value  | [Font](ts-types.md#font) | 是   | placeholder文本样式。 |
85
86### textAlign
87
88textAlign(value: TextAlign)
89
90设置文本在输入框中的水平对齐方式。
91
92支持TextAlign.StartTextAlign.CenterTextAlign.End93
94可通过[align](ts-universal-attributes-location.md)属性控制文本段落在垂直方向上的位置,此组件中不可通过align属性控制文本段落在水平方向上的位置,即align属性中Alignment.TopStartAlignment.TopAlignment.TopEnd效果相同,控制内容在顶部,Alignment.StartAlignment.CenterAlignment.End效果相同,控制内容垂直居中,Alignment.BottomStartAlignment.BottomAlignment.BottomEnd效果相同,控制内容在底部。
95
96当textAlign属性设置为TextAlign.JUSTIFY时,最后一行文本不参与两端对齐,为水平对齐首部效果。
97
98从API version 11开始,textAlign可设置TextAlign.JUSTIFY
99
100**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
101
102**系统能力:** SystemCapability.ArkUI.ArkUI.Full
103
104**参数:** 
105
106| 参数名 | 类型                                        | 必填 | 说明                                                       |
107| ------ | ------------------------------------------- | ---- | ---------------------------------------------------------- |
108| value  | [TextAlign](ts-appendix-enums.md#textalign) | 是   | 文本在输入框中的水平对齐方式。<br/>默认值:TextAlign.Start |
109
110### caretColor
111
112caretColor(value: ResourceColor)
113
114设置输入框光标颜色。
115
116**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
117
118**系统能力:** SystemCapability.ArkUI.ArkUI.Full
119
120**参数:** 
121
122| 参数名 | 类型                                       | 必填 | 说明                                   |
123| ------ | ------------------------------------------ | ---- | -------------------------------------- |
124| value  | [ResourceColor](ts-types.md#resourcecolor) | 是   | 输入框光标颜色。<br/>默认值:'#007DFF' |
125
126>  **说明:**     
127>   从API version 12开始,此接口支持设置文本手柄颜色,光标和文本手柄颜色保持一致。
128
129### fontColor
130
131fontColor(value: ResourceColor)
132
133设置字体颜色。
134
135**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
136
137**系统能力:** SystemCapability.ArkUI.ArkUI.Full
138
139**参数:** 
140
141| 参数名 | 类型                                       | 必填 | 说明       |
142| ------ | ------------------------------------------ | ---- | ---------- |
143| value  | [ResourceColor](ts-types.md#resourcecolor) | 是   | 字体颜色。 |
144
145### fontSize
146
147fontSize(value: Length)
148
149设置字体大小。
150
151**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
152
153**系统能力:** SystemCapability.ArkUI.ArkUI.Full
154
155**参数:** 
156
157| 参数名 | 类型                         | 必填 | 说明                                                         |
158| ------ | ---------------------------- | ---- | ------------------------------------------------------------ |
159| value  | [Length](ts-types.md#length) | 是   | 字体大小。fontSize为number类型时,使用fp单位。字体默认大小16fp。不支持设置百分比字符串。 |
160
161### fontStyle
162
163fontStyle(value: FontStyle)
164
165设置字体样式。
166
167**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
168
169**系统能力:** SystemCapability.ArkUI.ArkUI.Full
170
171**参数:** 
172
173| 参数名 | 类型                                        | 必填 | 说明                                    |
174| ------ | ------------------------------------------- | ---- | --------------------------------------- |
175| value  | [FontStyle](ts-appendix-enums.md#fontstyle) | 是   | 字体样式。<br/>默认值:FontStyle.Normal |
176
177### fontWeight
178
179fontWeight(value: number | FontWeight | string)
180
181设置文本的字体粗细,设置过大可能会在不同字体下有截断。
182
183**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
184
185**系统能力:** SystemCapability.ArkUI.ArkUI.Full
186
187**参数:** 
188
189| 参数名 | 类型                                                         | 必填 | 说明                                                         |
190| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
191| value  | number&nbsp;\|&nbsp;[FontWeight](ts-appendix-enums.md#fontweight)&nbsp;\|&nbsp;string | 是   | 文本的字体粗细,number类型取值[100,&nbsp;900],取值间隔为100,默认为400,取值越大,字体越粗。string类型仅支持number类型取值的字符串形式,例如"400",以及"bold"、"bolder"、"lighter"、"regular"、"medium",分别对应FontWeight中相应的枚举值。<br/>默认值:FontWeight.Normal |
192
193### fontFamily
194
195fontFamily(value: ResourceStr)
196
197设置字体列表。
198
199**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
200
201**系统能力:** SystemCapability.ArkUI.ArkUI.Full
202
203**参数:** 
204
205| 参数名 | 类型                                   | 必填 | 说明                                                         |
206| ------ | -------------------------------------- | ---- | ------------------------------------------------------------ |
207| value  | [ResourceStr](ts-types.md#resourcestr) | 是   | 字体列表。默认字体'HarmonyOS Sans'。<br>应用当前支持'HarmonyOS Sans'字体和[注册自定义字体](../js-apis-font.md)。<br>卡片当前仅支持'HarmonyOS Sans'字体。 |
208
209### inputFilter<sup>8+</sup>
210
211inputFilter(value: ResourceStr, error?: (value: string) => void)
212
213通过正则表达式设置输入过滤器。匹配表达式的输入允许显示,不匹配的输入将被过滤。仅支持单个字符匹配,不支持字符串匹配。
214
215**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
216
217**系统能力:** SystemCapability.ArkUI.ArkUI.Full
218
219**参数:** 
220
221| 参数名 | 类型                                   | 必填 | 说明                               |
222| ------ | -------------------------------------- | ---- | ---------------------------------- |
223| value  | [ResourceStr](ts-types.md#resourcestr) | 是   | 正则表达式。                       |
224| error  | (value: string) => void                | 否   | 正则匹配失败时,返回被过滤的内容。 |
225
226### copyOption<sup>9+</sup>
227
228copyOption(value: CopyOptions)
229
230设置输入的文本是否可复制。设置CopyOptions.None时,当前TextArea中的文字无法被复制、剪切和帮写,仅支持粘贴。
231
232设置CopyOptions.None时,不允许拖拽。
233
234**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
235
236**系统能力:** SystemCapability.ArkUI.ArkUI.Full
237
238**参数:** 
239
240| 参数名 | 类型                                             | 必填 | 说明                                                         |
241| ------ | ------------------------------------------------ | ---- | ------------------------------------------------------------ |
242| value  | [CopyOptions](ts-appendix-enums.md#copyoptions9) | 是   | 输入的文本是否可复制。<br/>默认值:CopyOptions.LocalDevice,支持设备内复制。 |
243
244### maxLength<sup>10+</sup>
245
246maxLength(value: number)
247
248设置文本的最大输入字符数。默认不设置最大输入字符数限制。到达文本最大字符限制,将无法继续输入字符,同时边框变为红色。
249
250**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
251
252**系统能力:** SystemCapability.ArkUI.ArkUI.Full
253
254**参数:** 
255
256| 参数名 | 类型   | 必填 | 说明                   |
257| ------ | ------ | ---- | ---------------------- |
258| value  | number | 是   | 文本的最大输入字符数。 |
259
260### showCounter<sup>10+</sup>
261
262showCounter(value: boolean, options?: InputCounterOptions)
263
264设置当通过InputCounterOptions输入的字符数超过阈值时显示计数器。
265
266参数value为true时,才能设置options,文本框开启计数下标功能,需要配合maxlength(设置最大字符限制)一起使用。字符计数器显示的效果是当前输入字符数/最大可输入字符数。
267
268当输入字符数大于最大字符数乘百分比值时,显示字符计数器。如果用户设置计数器时不设置InputCounterOptions,那么当前输入字符数达到最大字符数时,边框和计数器下标将变为红色。用户同时设置参数value为true和InputCounterOptions,当thresholdPercentage数值在有效区间内,且输入字符数超过最大字符数时,边框和计数器下标将变为红色,框体抖动。highlightBorder设置为false,则不显示红色边框,计数器默认显示红色边框。内联模式下字符计数器不显示。
269
270**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
271
272**系统能力:** SystemCapability.ArkUI.ArkUI.Full
273
274**参数:** 
275
276| 参数名                | 类型                                                         | 必填 | 说明             |
277| --------------------- | ------------------------------------------------------------ | ---- | ---------------- |
278| value                 | boolean                                                      | 是   | 是否显示计数器。 |
279| options<sup>11+</sup> | [InputCounterOptions](ts-types.md#inputcounteroptions11对象说明) | 否   | 计数器的百分比。 |
280
281### style<sup>10+</sup>
282
283style(value: TextContentStyle)
284
285设置文本框多态样式,内联输入风格只支持TextAreaType.Normal类型。
286
287**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
288
289**系统能力:** SystemCapability.ArkUI.ArkUI.Full
290
291**参数:** 
292
293| 参数名 | 类型                                                        | 必填 | 说明                                                  |
294| ------ | ----------------------------------------------------------- | ---- | ----------------------------------------------------- |
295| value  | [TextContentStyle](ts-appendix-enums.md#textcontentstyle10) | 是   | 文本框多态样式。<br/>默认值:TextContentStyle.DEFAULT |
296
297### enableKeyboardOnFocus<sup>10+</sup>
298
299enableKeyboardOnFocus(value: boolean)
300
301设置TextArea通过点击以外的方式获焦时,是否绑定输入法。
302
303从API version 10开始,获焦默认绑定输入法。
304
305**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
306
307**系统能力:** SystemCapability.ArkUI.ArkUI.Full
308
309**参数:** 
310
311| 参数名 | 类型    | 必填 | 说明                                                        |
312| ------ | ------- | ---- | ----------------------------------------------------------- |
313| value  | boolean | 是   | 通过点击以外的方式获焦时,是否绑定输入法。<br/>默认值:true |
314
315### selectionMenuHidden<sup>10+</sup>
316
317selectionMenuHidden(value: boolean)
318
319设置是否不弹出系统文本选择菜单。
320
321**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
322
323**系统能力:** SystemCapability.ArkUI.ArkUI.Full
324
325**参数:** 
326
327| 参数名 | 类型    | 必填 | 说明                                                         |
328| ------ | ------- | ---- | ------------------------------------------------------------ |
329| value  | boolean | 是   | 是否不弹出系统文本选择菜单。<br />设置为true时,单击输入框光标、长按输入框、双击输入框、三击输入框或者右键输入框,不弹出系统文本选择菜单。<br />设置为false时,弹出系统文本选择菜单。<br />默认值:false |
330
331### barState<sup>10+</sup>
332
333barState(value: BarState)
334
335设置输入框编辑态时滚动条的显示模式。
336
337**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
338
339**系统能力:** SystemCapability.ArkUI.ArkUI.Full
340
341**参数:** 
342
343| 参数名 | 类型                                      | 必填 | 说明                                                         |
344| ------ | ----------------------------------------- | ---- | ------------------------------------------------------------ |
345| value  | [BarState](ts-appendix-enums.md#barstate) | 是   | 输入框编辑态时滚动条的显示模式。<br/>默认值:BarState.Auto |
346
347### maxLines<sup>10+</sup>
348
349maxLines(value: number)
350
351配置textOverflow一起使用时,maxlines为可显示行数,超出截断;未配置textOverflow时,内联模式获焦状态下内容超出maxlines时,文本可滚动显示,内联模式非获焦状态下不生效maxlines,非内联模式按行截断。
352
353**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
354
355**系统能力:** SystemCapability.ArkUI.ArkUI.Full
356
357**参数:** 
358
359| 参数名 | 类型                                      | 必填 | 说明                                                         |
360| ------ | ----------------------------------------- | ---- | ------------------------------------------------------------ |
361| value  | number | 是   | 内联输入风格编辑态时文本可显示的最大行数。<br/>默认值:3,非内联模式下,默认值为+∞,不限制最大行数。 <br/>取值范围:(0, +∞) |
362
363### customKeyboard<sup>10+</sup>
364
365customKeyboard(value: CustomBuilder, options?: KeyboardOptions)
366
367设置自定义键盘。
368
369当设置自定义键盘时,输入框激活后不会打开系统输入法,而是加载指定的自定义组件。
370
371自定义键盘的高度可以通过自定义组件根节点的height属性设置,宽度不可设置,使用系统默认值。
372
373自定义键盘采用覆盖原始界面的方式呈现,当没有开启避让模式或者输入框不需要避让的场景不会对应用原始界面产生压缩或者上提。
374
375自定义键盘无法获取焦点,但是会拦截手势事件。
376
377默认在输入控件失去焦点时,关闭自定义键盘,开发者也可以通过[TextAreaController](#textareacontroller8).[stopEditing](#stopediting10)方法控制键盘关闭。
378
379如果设备支持拍摄输入,设置自定义键盘后,该输入框会不支持拍摄输入。
380
381**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
382
383**系统能力:** SystemCapability.ArkUI.ArkUI.Full
384
385**参数:** 
386
387| 参数名                | 类型                                        | 必填 | 说明                                                         |
388| --------------------- | ------------------------------------------- | ---- | ------------------------------------------------------------ |
389| value                 | [CustomBuilder](ts-types.md#custombuilder8) | 是   | 自定义键盘。<br/>**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 |
390| options<sup>12+</sup> | [KeyboardOptions](ts-basic-components-richeditor.md#keyboardoptions12)       | 否   | 设置自定义键盘是否支持避让功能。                             |
391
392### type<sup>11+</sup>
393
394type(value: TextAreaType)
395
396设置输入框类型。
397
398**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
399
400**系统能力:** SystemCapability.ArkUI.ArkUI.Full
401
402**参数:** 
403
404| 参数名 | 类型                                    | 必填 | 说明                                         |
405| ------ | --------------------------------------- | ---- | -------------------------------------------- |
406| value  | [TextAreaType](#textareatype11枚举说明) | 是   | 输入框类型。<br/>默认值:TextAreaType.Normal |
407
408### enterKeyType<sup>11+</sup>
409
410enterKeyType(value: EnterKeyType)
411
412设置输入法回车键类型。
413
414**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
415
416**系统能力:** SystemCapability.ArkUI.ArkUI.Full
417
418**参数:** 
419
420| 参数名 | 类型                                             | 必填 | 说明                                                 |
421| ------ | ------------------------------------------------ | ---- | ---------------------------------------------------- |
422| value  | [EnterKeyType](ts-types.md#enterkeytype枚举说明) | 是   | 输入法回车键类型。<br/>默认值:EnterKeyType.NEW_LINE |
423
424### enableAutoFill<sup>12+</sup>
425
426enableAutoFill(value: boolean)
427
428设置是否启用自动填充。
429
430**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
431
432**系统能力:** SystemCapability.ArkUI.ArkUI.Full
433
434**参数:**
435
436| 参数名 | 类型    | 必填 | 说明                                                         |
437| ------ | ------- | ---- | ------------------------------------------------------------ |
438| value  | boolean | 是   | 是否启用自动填充。<br/>true表示启用,false表示不启用。<br/>默认值:true |
439
440### contentType<sup>12+</sup>
441
442contentType(contentType: ContentType)
443
444设置自动填充类型。
445
446**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
447
448**系统能力:** SystemCapability.ArkUI.ArkUI.Full
449
450**参数:**
451
452| 参数名      | 类型                                  | 必填 | 说明           |
453| ----------- | ------------------------------------- | ---- | -------------- |
454| contentType | [ContentType](#contenttype12枚举说明) | 是   | 自动填充类型。 |
455
456### lineHeight<sup>12+</sup>
457
458lineHeight(value: number | string | Resource)
459
460设置文本的文本行高,设置值不大于0时,不限制文本行高,自适应字体大小,number类型时单位为fp。
461
462**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
463
464**系统能力:** SystemCapability.ArkUI.ArkUI.Full
465
466**参数:**
467
468| 参数名 | 类型                                                         | 必填 | 说明             |
469| ------ | ------------------------------------------------------------ | ---- | ---------------- |
470| value  | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 是   | 文本的文本行高。 |
471
472### decoration<sup>12+</sup>
473
474decoration(value: TextDecorationOptions)
475
476设置文本装饰线类型样式及其颜色。
477
478**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
479
480**系统能力:** SystemCapability.ArkUI.ArkUI.Full
481
482**参数:**
483
484| 参数名 | 类型                                                         | 必填 | 说明                                                         |
485| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
486| value  | [TextDecorationOptions](ts-types.md#textdecorationoptions12对象说明) | 是   | 文本装饰线对象。<br />默认值:{<br/>&nbsp;type:&nbsp;TextDecorationType.None,<br/>&nbsp;color:&nbsp;Color.Black,<br/>&nbsp;style:&nbsp;TextDecorationStyle.SOLID&nbsp;<br/>} |
487
488### letterSpacing<sup>12+</sup>
489
490letterSpacing(value: number | string | Resource)
491
492设置文本字符间距。设置该值为百分比时,按默认值显示。设置该值为0时,按默认值显示。
493
494当取值为负值时,文字会发生压缩,负值过小时会将组件内容区大小压缩为0,导致无内容显示。
495
496**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
497
498**系统能力:** SystemCapability.ArkUI.ArkUI.Full
499
500**参数:**
501
502| 参数名 | 类型                       | 必填 | 说明           |
503| ------ | -------------------------- | ---- | -------------- |
504| value  | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 是   | 文本字符间距。 |
505
506### fontFeature<sup>12+</sup>
507
508fontFeature(value: string)
509
510设置文字特性效果,比如数字等宽的特性。
511
512格式为:normal \| \<feature-tag-value\>
513
514\<feature-tag-value\>的格式为:\<string\> \[ \<integer\> \| on \| off ]
515
516\<feature-tag-value\>的个数可以有多个,中间用','隔开。
517
518例如,使用等宽数字的输入格式为:"ss01" on。
519
520**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
521
522**系统能力:** SystemCapability.ArkUI.ArkUI.Full
523
524**参数:** 
525
526| 参数名 | 类型   | 必填 | 说明           |
527| ------ | ------ | ---- | -------------- |
528| value  | string | 是   | 文字特性效果。 |
529
530Font Feature当前支持的属性见 [fontFeature属性列表](ts-basic-components-text.md#fontfeature12)。
531设置 Font Feature 属性,Font Feature 是 OpenType 字体的高级排版能力,如支持连字、数字等宽等特性,一般用在自定义字体中,其能力需要字体本身支持。
532更多 Font Feature 能力介绍可参考 https://www.w3.org/TR/css-fonts-3/#font-feature-settings-prop 和 https://sparanoid.com/lab/opentype-features/
533### wordBreak<sup>12+</sup>
534
535wordBreak(value: WordBreak)
536
537设置文本断行规则。该属性对placeholder文本无效。
538
539**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
540
541**系统能力:** SystemCapability.ArkUI.ArkUI.Full
542
543**参数:** 
544
545| 参数名 | 类型                                          | 必填 | 说明                                          |
546| ------ | --------------------------------------------- | ---- | --------------------------------------------- |
547| value  | [WordBreak](ts-appendix-enums.md#wordbreak11) | 是   | 文本断行规则。 <br />默认值:WordBreak.BREAK_WORD |
548
549>  **说明:**
550>
551>  组件不支持clip属性设置,设置该属性任意枚举值对组件文本截断无影响。
552
553### selectedBackgroundColor<sup>12+</sup>
554
555selectedBackgroundColor(value: ResourceColor)
556
557设置文本选中底板颜色。如果未设置不透明度,默认为20%不透明度。
558
559**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
560
561**系统能力:** SystemCapability.ArkUI.ArkUI.Full
562
563**参数:**
564
565| 参数名 | 类型                                       | 必填 | 说明                                       |
566| ------ | ------------------------------------------ | ---- | ------------------------------------------ |
567| value  | [ResourceColor](ts-types.md#resourcecolor) | 是   | 文本选中底板颜色。<br/>默认为20%不透明度。 |
568
569### caretStyle<sup>12+</sup>
570
571caretStyle(value: CaretStyle)
572
573设置光标风格。
574
575**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
576
577**系统能力:** SystemCapability.ArkUI.ArkUI.Full
578
579**参数:**
580
581| 参数名 | 类型                                | 必填 | 说明         |
582| ------ | ----------------------------------- | ---- | ------------ |
583| value  | [CaretStyle](ts-text-common.md#caretstyle10) | 是   | 光标的风格。 |
584
585### textIndent<sup>12+</sup>
586
587textIndent(value: Dimension)
588
589设置首行文本缩进。
590
591**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
592
593**系统能力:** SystemCapability.ArkUI.ArkUI.Full
594
595**参数:** 
596
597| 参数名 | 类型                                 | 必填 | 说明                         |
598| ------ | ----------------------------------- | ---- | ---------------------------- |
599| value  | [Dimension](ts-types.md#dimension10)| 是   | 首行文本缩进。<br/>默认值:0 |
600
601### textOverflow<sup>12+</sup>
602
603textOverflow(value: TextOverflow)
604
605设置文本超长时的显示方式。
606
607内联模式,主动配置textoverflow才会生效按maxline截断效果,不配置时,默认不截断。
608
609文本截断是按字截断。例如,英文以单词为最小单位进行截断,若需要以字母为单位进行截断,wordBreak属性可设置为WordBreak.BREAK_ALL610
611当overflow设置为TextOverflow.NoneTextOverflow.ClipTextOverflow.Ellipsis时,需配合maxLines使用,单独设置不生效。设置TextOverflow.NoneTextOverflow.Clip效果一样。
612
613**卡片能力:** 该接口支持在ArkTS卡片中使用。
614
615**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
616
617**系统能力:** SystemCapability.ArkUI.ArkUI.Full
618
619**参数:** 
620
621| 参数名 | 类型                                                          | 必填 | 说明                                                         |
622| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
623| value  | [TextOverflow](ts-appendix-enums.md#textoverflow)            | 是   | 文本超长时的显示方式。<br/>默认值:TextOverflow.Clip           |
624
625>  **说明:**     
626>   TextArea组件不支持设置TextOverflow.MARQUEE模式,当设置为TextOverflow.MARQUEE模式时 显示为TextOverflow.Clip
627
628### minFontSize<sup>12+</sup>
629
630minFontSize(value: number | string | Resource)
631
632设置文本最小显示字号。
633
634需配合[maxFontSize](#maxfontsize12)以及[maxLines](#maxlines10)或布局大小限制使用,单独设置不生效。
635
636自适应字号生效时,fontSize设置不生效。
637
638**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
639
640**系统能力:** SystemCapability.ArkUI.ArkUI.Full
641
642**参数:**
643
644| 参数名 | 类型                                                         | 必填 | 说明               |
645| ------ | ------------------------------------------------------------ | ---- | ------------------ |
646| value  | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 是   | 文本最小显示字号。 |
647
648### maxFontSize<sup>12+</sup>
649
650maxFontSize(value: number | string | Resource)
651
652设置文本最大显示字号。
653
654需配合[minFontSize](#minfontsize12)以及[maxLines](#maxlines10)或布局大小限制使用,单独设置不生效。
655
656自适应字号生效时,fontSize设置不生效。
657
658**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
659
660**系统能力:** SystemCapability.ArkUI.ArkUI.Full
661
662**参数:**
663
664| 参数名 | 类型                                                         | 必填 | 说明               |
665| ------ | ------------------------------------------------------------ | ---- | ------------------ |
666| value  | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 是   | 文本最大显示字号。 |
667
668### heightAdaptivePolicy<sup>12+</sup>
669
670heightAdaptivePolicy(value: TextHeightAdaptivePolicy)
671
672设置文本自适应高度的方式。
673
674当设置为TextHeightAdaptivePolicy.MAX_LINES_FIRST时,优先使用[maxLines](#maxlines10)属性来调整文本高度。如果使用maxLines属性的布局大小超过了布局约束,则尝试在[minFontSize](#minfontsize12)和[maxFontSize](#maxfontsize12)的范围内缩小字体以显示更多文本。
675组件设置为内联输入风格,编辑态与非编辑态存在字体大小不一致情况。
676
677当设置为TextHeightAdaptivePolicy.MIN_FONT_SIZE_FIRST时,优先使用minFontSize属性来调整文本高度。如果使用minFontSize属性可以将文本布局在一行中,则尝试在minFontSize和maxFontSize的范围内增大字体并使用最大可能的字体大小。
678
679当设置为TextHeightAdaptivePolicy.LAYOUT_CONSTRAINT_FIRST时,优先使用布局约束来调整文本高度。如果布局大小超过布局约束,则尝试在minFontSize和maxFontSize的范围内缩小字体以满足布局约束。
680
681**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
682
683**系统能力:** SystemCapability.ArkUI.ArkUI.Full
684
685**参数:** 
686
687| 参数名 | 类型                                                         | 必填 | 说明                                                         |
688| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
689| value  | [TextHeightAdaptivePolicy](ts-appendix-enums.md#textheightadaptivepolicy10) | 是   | 文本自适应高度的方式。<br/>默认值:TextHeightAdaptivePolicy.MAX_LINES_FIRST |
690
691### lineSpacing<sup>12+</sup>
692
693lineSpacing(value: LengthMetrics)
694
695设置文本的行间距,设置值不大于0时,取默认值0。
696
697**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
698
699**系统能力:** SystemCapability.ArkUI.ArkUI.Full
700
701**参数:** 
702
703| 参数名 | 类型                                                         | 必填 | 说明             |
704| ------ | ------------------------------------------------------------ | ---- | ---------------- |
705| value  | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 是   | 文本的行间距。默认值:0 |
706
707### lineBreakStrategy<sup>12+</sup>
708
709lineBreakStrategy(strategy: LineBreakStrategy)
710
711设置折行规则。该属性在wordBreak不等于breakAll的时候生效,不支持连词符。
712
713**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
714
715**系统能力:** SystemCapability.ArkUI.ArkUI.Full
716
717**参数:** 
718
719| 参数名   | 类型                                                         | 必填 | 说明                                                    |
720| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------- |
721| strategy | [LineBreakStrategy](ts-appendix-enums.md#linebreakstrategy12) | 是   | 文本的折行规则。 <br />默认值:LineBreakStrategy.GREEDY |
722
723### editMenuOptions<sup>12+</sup>
724
725editMenuOptions(editMenu: EditMenuOptions)
726
727设置自定义菜单扩展项,允许用户设置扩展项的文本内容、图标、回调方法。
728
729**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
730
731**系统能力:** SystemCapability.ArkUI.ArkUI.Full
732
733**参数:** 
734
735| 参数名 | 类型                                          | 必填 | 说明                                          |
736| ------ | --------------------------------------------- | ---- | --------------------------------------------- |
737| editMenu  | [EditMenuOptions](ts-text-common.md#editmenuoptions对象说明) | 是   | 扩展菜单选项。 |
738
739### enablePreviewText<sup>12+</sup>
740
741enablePreviewText(enable: boolean)
742
743设置是否开启输入预上屏。
744
745预上屏内容定义为文字暂存态,目前不支持文字拦截功能,因此不触发onWillInsert、onDidInsert、onWillDelete、onDidDelete回调。
746
747**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
748
749**系统能力:** SystemCapability.ArkUI.ArkUI.Full
750
751**参数:** 
752
753| 参数名 | 类型    | 必填 | 说明                               |
754| ------ | ------- | ---- | ---------------------------------- |
755| enable | boolean | 是   | 是否开启输入预上屏。<br/>默认值:true |
756
757>  **说明:**
758>
759>  该接口在CAPI场景使用时下,默认关闭。可以在工程的module.json5中配置[metadata](../../../../application-dev/quick-start/module-structure.md#metadata对象内部结构)字段控制是否启用预上屏,配置如下:
760> ```json
761> "metadata": [
762>  {
763>     "name": "can_preview_text",
764>     "value": "true",
765>  }
766> ]
767> ```
768
769### enableHapticFeedback<sup>13+</sup>
770
771enableHapticFeedback(isEnabled: boolean)
772
773设置是否开启触控反馈。
774
775**原子化服务API:** 从API version 13开始,该接口支持在原子化服务中使用。
776
777**系统能力:** SystemCapability.ArkUI.ArkUI.Full
778
779**参数:** 
780
781| 参数名 | 类型    | 必填 | 说明                               |
782| ------ | ------- | ---- | ---------------------------------- |
783| isEnabled | boolean | 是   | 是否开启触控反馈。<br/>默认值:true |
784
785>  **说明:**
786>
787>  开启触控反馈时,需要在工程的module.json5中配置requestPermissions字段开启振动权限,配置如下:
788> ```json
789> "requestPermissions": [
790>  {
791>     "name": "ohos.permission.VIBRATE",
792>  }
793> ]
794> ```
795
796## 事件
797
798除支持[通用事件](ts-universal-events-click.md)外,还支持以下事件:
799
800### onChange
801
802onChange(callback:&nbsp;EditableTextOnChangeCallback)
803
804输入内容发生变化时,触发该回调。
805
806**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
807
808**系统能力:** SystemCapability.ArkUI.ArkUI.Full
809
810**参数:** 
811
812| 参数名 | 类型   | 必填 | 说明                 |
813| ------ | ------ | ---- | -------------------- |
814| callback  | [EditableTextOnChangeCallback](ts-text-common.md#editabletextonchangecallback12) | 是   | 当前输入文本内容变化时的回调。 |
815
816### onEditChange<sup>10+</sup>
817
818onEditChange(callback:&nbsp;(isEditing:&nbsp;boolean)&nbsp;=&gt;&nbsp;void)
819
820输入状态变化时,触发该回调。有光标时为编辑态,无光标时为非编辑态。isEditing为true表示正在输入。
821
822**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
823
824**系统能力:** SystemCapability.ArkUI.ArkUI.Full
825
826**参数:** 
827
828| 参数名    | 类型    | 必填 | 说明                 |
829| --------- | ------- | ---- | -------------------- |
830| isEditing | boolean | 是   | 为true表示正在输入。 |
831
832### onCopy<sup>8+</sup>
833
834onCopy(callback:&nbsp;(value:&nbsp;string)&nbsp;=&gt;&nbsp;void)
835
836进行复制操作时,触发该回调。
837
838**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
839
840**系统能力:** SystemCapability.ArkUI.ArkUI.Full
841
842**参数:** 
843
844| 参数名 | 类型   | 必填 | 说明             |
845| ------ | ------ | ---- | ---------------- |
846| value  | string | 是   | 复制的文本内容。 |
847
848### onCut<sup>8+</sup>
849
850onCut(callback:&nbsp;(value:&nbsp;string)&nbsp;=&gt;&nbsp;void)
851
852进行剪切操作时,触发该回调。
853
854**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
855
856**系统能力:** SystemCapability.ArkUI.ArkUI.Full
857
858**参数:** 
859
860| 参数名 | 类型   | 必填 | 说明             |
861| ------ | ------ | ---- | ---------------- |
862| value  | string | 是   | 剪切的文本内容。 |
863
864### onPaste
865
866onPaste(callback:&nbsp;(value:&nbsp;string, event:&nbsp;PasteEvent)&nbsp;=&gt;&nbsp;void)
867
868进行粘贴操作时,触发该回调。
869
870**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
871
872**系统能力:** SystemCapability.ArkUI.ArkUI.Full
873
874**参数:** 
875
876| 参数名              | 类型                                                         | 必填 | 说明                   |
877| ------------------- | ------------------------------------------------------------ | ---- | ---------------------- |
878| value               | string                                                       | 是   | 粘贴的文本内容。       |
879| event<sup>11+</sup> | [PasteEvent](ts-basic-components-richeditor.md#pasteevent11) | 是   | 用户自定义的粘贴事件。 |
880
881### onTextSelectionChange<sup>10+</sup>
882
883onTextSelectionChange(callback: (selectionStart: number, selectionEnd: number) => void)
884
885文本选择的位置发生变化或编辑状态下光标位置发生变化时,触发该回调。
886
887**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
888
889**系统能力:** SystemCapability.ArkUI.ArkUI.Full
890
891**参数:** 
892
893| 参数名         | 类型   | 必填 | 说明                                    |
894| -------------- | ------ | ---- | --------------------------------------- |
895| selectionStart | number | 是   | 所选文本的起始位置,文字的起始位置为0。 |
896| selectionEnd   | number | 是   | 所选文本的结束位置。                    |
897
898### onContentScroll<sup>10+</sup>
899
900onContentScroll(callback: (totalOffsetX: number, totalOffsetY: number) => void)
901
902文本内容滚动时,触发该回调。
903
904**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
905
906**系统能力:** SystemCapability.ArkUI.ArkUI.Full
907
908**参数:** 
909
910| 参数名       | 类型   | 必填 | 说明                               |
911| ------------ | ------ | ---- | ---------------------------------- |
912| totalOffsetX | number | 是   | 文本在内容区的横坐标偏移,单位px。 |
913| totalOffsetY | number | 是   | 文本在内容区的纵坐标偏移,单位px。 |
914
915### onSubmit<sup>11+</sup>
916
917onSubmit(callback:&nbsp;(enterKey:&nbsp;EnterKeyType)&nbsp;=&gt;&nbsp;void)
918
919按下输入法回车键触发该回调。
920
921**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
922
923**系统能力:** SystemCapability.ArkUI.ArkUI.Full
924
925**参数:** 
926
927| 参数名   | 类型                                             | 必填 | 说明                                                         |
928| -------- | ------------------------------------------------ | ---- | ------------------------------------------------------------ |
929| enterKey | [EnterKeyType](ts-types.md#enterkeytype枚举说明) | 是   | 输入法回车键类型,类型为EnterKeyType.NEW_LINE时不触发onSubmit。 |
930
931### onWillInsert<sup>12+</sup>
932
933onWillInsert(callback: Callback\<InsertValue, boolean>)
934
935在将要输入时,触发该回调。
936
937**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
938
939**系统能力:** SystemCapability.ArkUI.ArkUI.Full
940
941**参数:**
942
943| 参数名 | 类型                                                         | 必填 | 说明               |
944| ------ | ------------------------------------------------------------ | ---- | ------------------ |
945| callback  | Callback\<[InsertValue](ts-text-common.md#insertvalue12对象说明), boolean> | 是   | 在将要输入时调用的回调。<br/>在返回true时,表示正常插入,返回false时,表示不插入。<br/>在预上屏操作时,该回调不触发。<br/>仅支持系统输入法输入的场景。 |
946
947### onDidInsert<sup>12+</sup>
948
949onDidInsert(callback: Callback\<InsertValue>)
950
951在输入完成时,触发该回调。
952
953**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
954
955**系统能力:** SystemCapability.ArkUI.ArkUI.Full
956
957**参数:**
958
959| 参数名 | 类型                                                         | 必填 | 说明               |
960| ------ | ------------------------------------------------------------ | ---- | ------------------ |
961| callback  | Callback\<[InsertValue](ts-text-common.md#insertvalue12对象说明)> | 是   | 在输入完成时调用的回调。<br/>仅支持系统输入法输入的场景。 |
962
963### onWillDelete<sup>12+</sup>
964
965onWillDelete(callback: Callback\<DeleteValue, boolean>)
966
967在将要删除时,触发该回调。
968
969**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
970
971**系统能力:** SystemCapability.ArkUI.ArkUI.Full
972
973**参数:**
974
975| 参数名 | 类型                                                         | 必填 | 说明               |
976| ------ | ------------------------------------------------------------ | ---- | ------------------ |
977| callback  | Callback\<[DeleteValue](ts-text-common.md#deletevalue12对象说明), boolean> | 是   | 在将要删除时调用的回调。<br/>在返回true时,表示正常删除,返回false时,表示不删除。<br/>在预上屏删除操作时,该回调不触发。<br/>仅支持系统输入法输入的场景。 |
978
979### onDidDelete<sup>12+</sup>
980
981onDidDelete(callback: Callback\<DeleteValue>)
982
983在删除完成时,触发该回调。
984
985**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
986
987**系统能力:** SystemCapability.ArkUI.ArkUI.Full
988
989**参数:**
990
991| 参数名 | 类型                                                         | 必填 | 说明               |
992| ------ | ------------------------------------------------------------ | ---- | ------------------ |
993| callback  | Callback\<[DeleteValue](ts-text-common.md#deletevalue12对象说明)> | 是   | 在删除完成时调用的回调。<br/>仅支持系统输入法输入的场景。 |
994
995## TextAreaController<sup>8+</sup>
996
997TextArea组件的控制器继承自[TextContentControllerBase](ts-types.md#textcontentcontrollerbase10)。
998
999**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
1000
1001**系统能力:** SystemCapability.ArkUI.ArkUI.Full
1002
1003### 导入对象
1004
1005```
1006controller: TextAreaController = new TextAreaController()
1007```
1008
1009### constructor<sup>8+</sup>
1010
1011constructor()
1012
1013TextAreaController的构造函数。
1014
1015**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
1016
1017**系统能力:** SystemCapability.ArkUI.ArkUI.Full
1018
1019### caretPosition<sup>8+</sup>
1020
1021caretPosition(value: number): void
1022
1023设置输入光标的位置。
1024
1025**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
1026
1027**系统能力:** SystemCapability.ArkUI.ArkUI.Full
1028
1029**参数:**
1030
1031| 参数名 | 类型 | 必填 | 说明  |
1032| ------ | ---- | ---- | ---- |
1033| value  | number   | 是   | 从字符串开始到光标所在位置的字符长度。 |
1034
1035### setTextSelection<sup>10+</sup>
1036
1037setTextSelection(selectionStart: number, selectionEnd: number, options?: SelectionOptions): void
1038
1039组件在获焦状态下,调用该接口设置文本选择区域并高亮显示,且只有在selectionStart小于selectionEnd时,文字才会被选取、高亮显示。
1040
1041**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
1042
1043**系统能力:** SystemCapability.ArkUI.ArkUI.Full
1044
1045**参数:**
1046
1047| 参数名 | 类型 | 必填 | 说明  |
1048| ------ | ---- | ---- | ---- |
1049| selectionStart | number   | 是   | 文本选择区域起始位置,文本框中文字的起始位置为0。<br/>当selectionStart小于0时、按照0处理;当selectionStart大于文字最大长度时、按照文字最大长度处理。<br/>**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 |
1050| selectionEnd   | number   | 是   | 文本选择区域结束位置。<br/>当selectionEnd小于0时、按照0处理;当selectionEnd大于文字最大长度时、按照文字最大长度处理。<br/>**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 |
1051| options<sup>12+</sup>   | [SelectionOptions](ts-types.md#selectionoptions12对象说明) | 否    | 选中文字时的配置。<br />默认值:MenuPolicy.DEFAULT<br/>**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 |
1052
1053>  **说明:**
1054>
1055>  如果selectionMenuHidden被赋值为true或设备为2in1时,即使options被赋值为MenuPolicy.SHOW,调用setTextSelection也不弹出菜单。
1056>
1057>  如果选中的文本含有emoji表情时,表情的起始位置包含在设置的文本选中区域内就会被选中。
1058
1059### stopEditing<sup>10+</sup>
1060
1061stopEditing(): void
1062
1063退出编辑态。
1064
1065**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
1066
1067**系统能力:** SystemCapability.ArkUI.ArkUI.Full
1068
1069## TextAreaType<sup>11+</sup>枚举说明
1070
1071**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
1072
1073**系统能力:** SystemCapability.ArkUI.ArkUI.Full
1074
1075| 名称   | 值  | 说明 |
1076| ------ | ----- | ------ |
1077| NORMAL   | 0 | 基本输入模式。<br/>支持输入数字、字母、下划线、空格、特殊字符。 |
1078| NUMBER   | 2 | 纯数字输入模式。      |
1079| PHONE_NUMBER | 3 | 电话号码输入模式。<br/>支持输入数字、空格、+ 、-、*、#、(、),长度不限。 |
1080| EMAIL    | 5 | 邮箱地址输入模式。<br/>支持数字,字母,下划线、小数点、!、#、$、%、&、'、*、+、-、/、=、?、^、`、\{、\|、\}、~,以及@字符(只能存在一个@字符)。 |
1081| NUMBER_DECIMAL<sup>12+</sup>  | 12 | 带小数点的数字输入模式。<br/>支持数字,小数点(只能存在一个小数点)。|
1082| URL<sup>12+</sup>  | 13 | 带URL的输入模式。 |
1083
1084## ContentType<sup>12+</sup>枚举说明
1085
1086自动填充类型。
1087
1088**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
1089
1090**系统能力:** SystemCapability.ArkUI.ArkUI.Full
1091
1092| 名称                       | 值   | 说明                                                         |
1093| -------------------------- | ---- | ------------------------------------------------------------ |
1094| USER_NAME                  | 0    | 【用户名】在已启用密码保险箱的情况下,支持用户名的自动保存和自动填充。 |
1095| PASSWORD                   | 1    | 【密码】在已启用密码保险箱的情况下,支持密码的自动保存和自动填充。 |
1096| NEW_PASSWORD               | 2    | 【新密码】在已启用密码保险箱的情况下,支持自动生成新密码。   |
1097| FULL_STREET_ADDRESS        | 3    | 【详细地址】在已启用情景化自动填充的情况下,支持详细地址的自动保存和自动填充。 |
1098| HOUSE_NUMBER               | 4    | 【门牌号】在已启用情景化自动填充的情况下,支持门牌号的自动保存和自动填充。 |
1099| DISTRICT_ADDRESS           | 5    | 【区/县】在已启用情景化自动填充的情况下,支持区/县的自动保存和自动填充。 |
1100| CITY_ADDRESS               | 6    | 【市】在已启用情景化自动填充的情况下,支持市的自动保存和自动填充。 |
1101| PROVINCE_ADDRESS           | 7    | 【省】在已启用情景化自动填充的情况下,支持省的自动保存和自动填充。 |
1102| COUNTRY_ADDRESS            | 8    | 【国家】在已启用情景化自动填充的情况下,支持国家的自动保存和自动填充。 |
1103| PERSON_FULL_NAME           | 9    | 【姓名】在已启用情景化自动填充的情况下,支持姓名的自动保存和自动填充。 |
1104| PERSON_LAST_NAME           | 10   | 【姓氏】在已启用情景化自动填充的情况下,支持姓氏的自动保存和自动填充。 |
1105| PERSON_FIRST_NAME          | 11   | 【名字】在已启用情景化自动填充的情况下,支持名字的自动保存和自动填充。 |
1106| PHONE_NUMBER               | 12   | 【手机号码】在已启用情景化自动填充的情况下,支持手机号码的自动保存和自动填充。 |
1107| PHONE_COUNTRY_CODE         | 13   | 【国家代码】在已启用情景化自动填充的情况下,支持国家代码的自动保存和自动填充。 |
1108| FULL_PHONE_NUMBER          | 14   | 【包含国家代码的手机号码】在已启用情景化自动填充的情况下,支持包含国家代码的手机号码的自动保存和自动填充。 |
1109| EMAIL_ADDRESS              | 15   | 【邮箱地址】在已启用情景化自动填充的情况下,支持邮箱地址的自动保存和自动填充。 |
1110| BANK_CARD_NUMBER           | 16   | 【银行卡号】在已启用情景化自动填充的情况下,支持银行卡号的自动保存和自动填充。 |
1111| ID_CARD_NUMBER             | 17   | 【身份证号】在已启用情景化自动填充的情况下,支持身份证号的自动保存和自动填充。 |
1112| NICKNAME                   | 23   | 【昵称】在已启用情景化自动填充的情况下,支持昵称的自动保存和自动填充。 |
1113| DETAIL_INFO_WITHOUT_STREET | 24   | 【无街道地址】在已启用情景化自动填充的情况下,支持无街道地址的自动保存和自动填充。 |
1114| FORMAT_ADDRESS             | 25   | 【标准地址】在已启用情景化自动填充的情况下,支持标准地址的自动保存和自动填充。 |
1115
1116## 示例
1117
1118### 示例1
1119TextArea基本使用示例。
1120```ts
1121// xxx.ets
1122@Entry
1123@Component
1124struct TextAreaExample {
1125  @State text: string = ''
1126  @State positionInfo: CaretOffset = { index: 0, x: 0, y: 0 }
1127  controller: TextAreaController = new TextAreaController()
1128
1129  build() {
1130    Column() {
1131      TextArea({
1132        text: this.text,
1133        placeholder: 'The text area can hold an unlimited amount of text. input your word...',
1134        controller: this.controller
1135      })
1136        .placeholderFont({ size: 16, weight: 400 })
1137        .width(336)
1138        .height(56)
1139        .margin(20)
1140        .fontSize(16)
1141        .fontColor('#182431')
1142        .backgroundColor('#FFFFFF')
1143        .onChange((value: string) => {
1144          this.text = value
1145        })
1146      Text(this.text)
1147      Button('Set caretPosition 1')
1148        .backgroundColor('#007DFF')
1149        .margin(15)
1150        .onClick(() => {
1151          // 设置光标位置到第一个字符后
1152          this.controller.caretPosition(1)
1153        })
1154      Button('Get CaretOffset')
1155        .backgroundColor('#007DFF')
1156        .margin(15)
1157        .onClick(() => {
1158          this.positionInfo = this.controller.getCaretOffset()
1159        })
1160    }.width('100%').height('100%').backgroundColor('#F1F3F5')
1161  }
1162}
1163```
1164
1165![textArea](figures/textArea.gif)
1166
1167### 示例2
1168maxLength、showCounter属性接口使用示例。
1169```ts
1170// xxx.ets
1171@Entry
1172@Component
1173struct TextAreaExample {
1174  @State text: string = 'test'
1175  @State counterVisible: boolean = false
1176  @State maxNumber: number = -1
1177  controller: TextAreaController = new TextAreaController()
1178
1179  build() {
1180    Column() {
1181      TextArea({
1182        text: this.text,
1183        placeholder: 'The text area can hold an unlimited amount of text. input your word...',
1184        controller: this.controller
1185      })
1186        .placeholderFont({ size: 16, weight: 400 })
1187        .width(336)
1188        .height(56)
1189        .margin(20)
1190        .fontSize(16)
1191        .fontColor('#182431')
1192        .maxLength(4)
1193        .showCounter(true)
1194        .backgroundColor('#FFFFFF')
1195        .onChange((value: string) => {
1196          this.text = value
1197        })
1198    }.width('100%').height('100%').backgroundColor('#F1F3F5')
1199  }
1200}
1201```
1202
1203![maxLength](figures/maxLength.png)
1204
1205
1206### 示例3
1207TextArea绑定自定义键盘使用示例。
1208```ts
1209// xxx.ets
1210@Entry
1211@Component
1212struct TextAreaExample {
1213  controller: TextAreaController = new TextAreaController()
1214  @State inputValue: string = ""
1215
1216  // 自定义键盘组件
1217  @Builder CustomKeyboardBuilder() {
1218    Column() {
1219      Button('x').onClick(() => {
1220        // 关闭自定义键盘
1221        this.controller.stopEditing()
1222      })
1223      Grid() {
1224        ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'], (item: number | string) => {
1225          GridItem() {
1226            Button(item + "")
1227              .width(110).onClick(() => {
1228              this.inputValue += item
1229            })
1230          }
1231        })
1232      }.maxCount(3).columnsGap(10).rowsGap(10).padding(5)
1233    }.backgroundColor(Color.Gray)
1234  }
1235
1236  build() {
1237    Column() {
1238      TextArea({ controller: this.controller, text: this.inputValue})
1239        // 绑定自定义键盘
1240        .customKeyboard(this.CustomKeyboardBuilder()).margin(10).border({ width: 1 })
1241        .height(200)
1242    }
1243  }
1244}
1245```
1246
1247![customKeyboard](figures/textAreaCustomKeyboard.png)
1248
1249### 示例4
1250TextArea计数器使用示例。
1251```ts
1252// xxx.ets
1253@Entry
1254@Component
1255struct TextAreaExample {
1256  @State text: string = ''
1257  controller: TextAreaController = new TextAreaController()
1258
1259  build() {
1260    Column() {
1261      TextArea({ text: this.text, controller: this.controller })
1262        .placeholderFont({ size: 16, weight: 400 })
1263        .width(336)
1264        .height(56)
1265        .maxLength(6)
1266		.showCounter(true, { thresholdPercentage: 50, highlightBorder: true })
1267		//计数器显示效果为用户当前输入字符数/最大字符限制数。最大字符限制数通过maxLength()接口设置。
1268        //如果用户当前输入字符数达到最大字符限制乘50%(thresholdPercentage)。字符计数器显示。
1269        //用户设置highlightBorder为false时,配置取消红色边框。不设置此参数时,默认为true。
1270        .onChange((value: string) => {
1271          this.text = value
1272        })
1273    }.width('100%').height('100%').backgroundColor('#F1F3F5')
1274  }
1275}
1276```
1277
1278![TextAreaCounter](figures/TextAreaCounter.jpg)
1279
1280
1281### 示例5
1282enterKeyType属性接口使用示例。
1283```ts
1284// xxx.ets
1285@Entry
1286@Component
1287struct TextInputExample {
1288  @State text: string = ''
1289  @State enterTypes: Array<EnterKeyType> =
1290    [EnterKeyType.Go, EnterKeyType.Search, EnterKeyType.Send, EnterKeyType.Done, EnterKeyType.Next,
1291      EnterKeyType.PREVIOUS, EnterKeyType.NEW_LINE]
1292  @State index: number = 0
1293
1294  build() {
1295    Column({ space: 20 }) {
1296      TextArea({ placeholder: '请输入用户名', text: this.text })
1297        .width(380)
1298        .enterKeyType(this.enterTypes[this.index])
1299        .onChange((value: string) => {
1300          this.text = value
1301        })
1302        .onSubmit((enterKey: EnterKeyType) => {
1303          console.log("trigger area onsubmit" + enterKey);
1304        })
1305      Button('改变EnterKeyType').onClick(() => {
1306        this.index = (this.index + 1) % this.enterTypes.length;
1307      })
1308
1309    }.width('100%')
1310  }
1311}
1312```
1313
1314![TextAreaEnterKeyType](figures/area_enterkeytype.gif)
1315
1316
1317### 示例6
1318示例展示设置不同wordBreak属性的TextArea样式。
1319
1320```ts
1321// xxx.ets
1322@Entry
1323@Component
1324struct TextAreaExample {
1325  build() {
1326    Column() {
1327      Text("属性WordBreakType为NORMAL的样式:").fontSize(16).fontColor(0xFF0000)
1328      TextArea({
1329        text: 'This is set wordBreak to WordBreak text Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu.'
1330      })
1331        .fontSize(16)
1332        .border({ width: 1 })
1333        .wordBreak(WordBreak.NORMAL)
1334      Text("英文文本,属性WordBreakType为BREAK_ALL的样式:").fontSize(16).fontColor(0xFF0000)
1335      TextArea({
1336        text: 'This is set wordBreak to WordBreak text Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu.'
1337      })
1338        .fontSize(16)
1339        .border({ width: 1 })
1340        .wordBreak(WordBreak.BREAK_ALL)
1341      Text("中文文本,属性WordBreakType为BREAK_ALL的样式:").fontSize(16).fontColor(0xFF0000)
1342      TextArea({
1343        text: '多行文本输入框组件,当输入的文本内容超过组件宽度时会自动换行显示。\n高度未设置时,组件无默认高度,自适应内容高度。宽度未设置时,默认撑满最大宽度。'
1344      })
1345        .fontSize(16)
1346        .border({ width: 1 })
1347        .wordBreak(WordBreak.BREAK_ALL)
1348      Text("属性WordBreakType为BREAK_WORD的样式:").fontSize(16).fontColor(0xFF0000)
1349      TextArea({
1350        text: 'This is set wordBreak to WordBreak text Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu.'
1351      })
1352        .fontSize(16)
1353        .border({ width: 1 })
1354        .wordBreak(WordBreak.BREAK_WORD)
1355    }
1356  }
1357}
1358```
1359
1360![TextAreaWordBreak](figures/TextAreaWordBreak.jpeg)
1361
1362### 示例7
1363
1364该示例实现了使用lineHeight设置文本的文本行高,使用letterSpacing设置文本字符间距,使用decoration设置文本装饰线样式。
1365
1366```ts
1367// xxx.ets
1368@Entry
1369@Component
1370struct TextAreaExample {
1371  build() {
1372    Row() {
1373      Column() {
1374        Text('lineHeight').fontSize(9).fontColor(0xCCCCCC)
1375        TextArea({text: 'lineHeight unset'})
1376          .border({ width: 1 }).padding(10).margin(5)
1377        TextArea({text: 'lineHeight 15'})
1378          .border({ width: 1 }).padding(10).margin(5).lineHeight(15)
1379        TextArea({text: 'lineHeight 30'})
1380          .border({ width: 1 }).padding(10).margin(5).lineHeight(30)
1381
1382        Text('letterSpacing').fontSize(9).fontColor(0xCCCCCC)
1383        TextArea({text: 'letterSpacing 0'})
1384          .border({ width: 1 }).padding(5).margin(5).letterSpacing(0)
1385        TextArea({text: 'letterSpacing 3'})
1386          .border({ width: 1 }).padding(5).margin(5).letterSpacing(3)
1387        TextArea({text: 'letterSpacing -1'})
1388          .border({ width: 1 }).padding(5).margin(5).letterSpacing(-1)
1389
1390        Text('decoration').fontSize(9).fontColor(0xCCCCCC)
1391        TextArea({text: 'LineThrough, Red\nsecond line'})
1392          .border({ width: 1 }).padding(5).margin(5)
1393          .decoration({type: TextDecorationType.LineThrough, color: Color.Red})
1394        TextArea({text: 'Overline, Red, DOTTED\nsecond line'})
1395          .border({ width: 1 }).padding(5).margin(5)
1396          .decoration({type: TextDecorationType.Overline, color: Color.Red, style: TextDecorationStyle.DOTTED})
1397        TextArea({text: 'Underline, Red, WAVY\nsecond line'})
1398          .border({ width: 1 }).padding(5).margin(5)
1399          .decoration({type: TextDecorationType.Underline, color: Color.Red, style: TextDecorationStyle.WAVY})
1400      }.height('90%')
1401    }
1402    .width('90%')
1403    .margin(10)
1404  }
1405}
1406```
1407
1408![TextAreaDecoration](figures/textarea_decoration.png)
1409
1410### 示例8
1411fontFeature属性使用示例,对比了fontFeature使用ss01属性和不使用ss01属性的效果。
1412
1413```ts
1414@Entry
1415@Component
1416struct textArea {
1417  @State text1: string = 'This is ss01 on : 0123456789'
1418  @State text2: string = 'This is ss01 off: 0123456789'
1419
1420  build() {
1421    Column(){
1422      TextArea({text: this.text1})
1423        .fontSize(20)
1424        .margin({top:200})
1425        .fontFeature("\"ss01\" on")
1426      TextArea({text : this.text2})
1427        .margin({top:10})
1428        .fontSize(20)
1429        .fontFeature("\"ss01\" off")
1430    }
1431    .width("90%")
1432    .margin("5%")
1433  }
1434}
1435```
1436![fontFeature](figures/textAreaFontFeature.png)
1437
1438### 示例9
1439
1440自定义键盘弹出发生避让示例
1441
1442```ts
1443@Entry
1444@Component
1445struct TextAreaExample {
1446  controller: TextAreaController = new TextAreaController()
1447  @State inputValue: string = ""
1448  @State height1:string|number = '80%'
1449  @State height2:number = 100
1450  @State supportAvoidance:boolean = true;
1451
1452  // 自定义键盘组件
1453  @Builder CustomKeyboardBuilder() {
1454    Column() {
1455      Row(){
1456        Button('x').onClick(() => {
1457          // 关闭自定义键盘
1458          this.controller.stopEditing()
1459        }).margin(10)
1460      }
1461      Grid() {
1462        ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'], (item: number | string) => {
1463          GridItem() {
1464            Button(item + "")
1465              .width(110).onClick(() => {
1466              this.inputValue += item
1467            })
1468          }
1469        })
1470      }.maxCount(3).columnsGap(10).rowsGap(10).padding(5)
1471    }.backgroundColor(Color.Gray)
1472  }
1473
1474  build() {
1475    Column() {
1476      Row(){
1477        Button("20%")
1478          .fontSize(24)
1479          .onClick(()=>{
1480            this.height1 = "20%"
1481          })
1482        Button("80%")
1483          .fontSize(24)
1484          .margin({left:20})
1485          .onClick(()=>{
1486            this.height1 = "80%"
1487          })
1488      }
1489      .justifyContent(FlexAlign.Center)
1490      .alignItems(VerticalAlign.Bottom)
1491      .height(this.height1)
1492      .width("100%")
1493      .padding({bottom:50})
1494      TextArea({ controller: this.controller, text: this.inputValue})
1495        .height(100)
1496        // 绑定自定义键盘
1497        .customKeyboard(this.CustomKeyboardBuilder(),{ supportAvoidance: this.supportAvoidance }).margin(10).border({ width: 1 })
1498        // .height(200)
1499    }
1500  }
1501}
1502```
1503![CustomTextAreaType](figures/textAreaCustomKeyboard.gif)
1504
1505### 示例10
1506
1507该示例实现了使用minFontSize,maxFontSize及heightAdaptivePolicy设置文本自适应字号。
1508
1509```ts
1510// xxx.ets
1511@Entry
1512@Component
1513struct TextAreaExample {
1514  build() {
1515    Row() {
1516      Column() {
1517        Text('heightAdaptivePolicy').fontSize(9).fontColor(0xCCCCCC)
1518        TextArea({text: 'This is the text with the height adaptive policy set'})
1519          .width('80%').height(90).borderWidth(1).margin(1)
1520          .minFontSize(4)
1521          .maxFontSize(40)
1522          .maxLines(3)
1523          .heightAdaptivePolicy(TextHeightAdaptivePolicy.MAX_LINES_FIRST)
1524        TextArea({text: 'This is the text with the height adaptive policy set'})
1525          .width('80%').height(90).borderWidth(1).margin(1)
1526          .minFontSize(4)
1527          .maxFontSize(40)
1528          .maxLines(3)
1529          .heightAdaptivePolicy(TextHeightAdaptivePolicy.MIN_FONT_SIZE_FIRST)
1530        TextArea({text: 'This is the text with the height adaptive policy set'})
1531          .width('80%').height(90).borderWidth(1).margin(1)
1532          .minFontSize(4)
1533          .maxFontSize(40)
1534          .maxLines(3)
1535          .heightAdaptivePolicy(TextHeightAdaptivePolicy.LAYOUT_CONSTRAINT_FIRST)
1536      }.height('90%')
1537    }
1538    .width('90%')
1539    .margin(10)
1540  }
1541}
1542```
1543
1544![TextAreaAdaptFont](figures/textarea_adapt_font.png)
1545
1546### 示例11
1547
1548lineSpacing使用示例,对比了不设置lineSpacing与lineSpacing设置不同单位的效果。
1549
1550```ts
1551import { LengthMetrics } from '@kit.ArkUI'
1552
1553@Entry
1554@Component
1555struct LineSpacingExample {
1556  build() {
1557      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
1558        Text('TextArea lineSpacing.').fontSize(9).fontColor(0xCCCCCC)
1559        TextArea({ placeholder: 'This is the TextArea with no lineSpacing set.' })
1560          .fontSize(12)
1561        TextArea({ placeholder: 'This is the TextArea with lineSpacing set to 20_px.' })
1562          .fontSize(12)
1563          .lineSpacing(LengthMetrics.px(20))
1564        TextArea({ placeholder: 'This is the TextArea with lineSpacing set to 20_vp.' })
1565          .fontSize(12)
1566          .lineSpacing(LengthMetrics.vp(20))
1567        TextArea({ placeholder: 'This is the TextArea with lineSpacing set to 20_fp.' })
1568          .fontSize(12)
1569          .lineSpacing(LengthMetrics.fp(20))
1570        TextArea({ placeholder: 'This is the TextArea with lineSpacing set to 20_lpx.' })
1571          .fontSize(12)
1572          .lineSpacing(LengthMetrics.lpx(20))
1573        TextArea({ placeholder: 'This is the TextArea with lineSpacing set to 100%.' })
1574          .fontSize(12)
1575          .lineSpacing(LengthMetrics.percent(1))
1576      }.height(600).width(350).padding({ left: 35, right: 35, top: 35 })
1577  }
1578}
1579```
1580
1581![lineSpacing](figures/TextArea_lineSpacing.png)
1582
1583### 示例12
1584
1585自动填充示例
1586
1587```ts
1588// xxx.ets
1589@Entry
1590@Component
1591struct TextAreaExample {
1592  @State text: string = ''
1593
1594  build() {
1595    Column() {
1596      // 邮箱地址自动填充类型
1597      TextArea({ placeholder: 'input your email...' })
1598        .width('95%')
1599        .height(40)
1600        .margin(20)
1601        .contentType(ContentType.EMAIL_ADDRESS)
1602        .enableAutoFill(true)
1603        .maxLength(20)
1604      // 街道地址自动填充类型
1605      TextArea({ placeholder: 'input your street address...' })
1606        .width('95%')
1607        .height(40)
1608        .margin(20)
1609        .contentType(ContentType.FULL_STREET_ADDRESS)
1610        .enableAutoFill(true)
1611        .maxLength(20)
1612    }.width('100%').height('100%').backgroundColor('#F1F3F5')
1613  }
1614}
1615```
1616
1617![CustomTextAreaType](figures/textAreaAutoFillFeature.png)
1618
1619### 示例13
1620
1621lineBreakStrategy使用示例,展示了lineBreakStrategy设置不同挡位的效果。
1622
1623```ts
1624@Entry
1625@Component
1626struct TextAreaExample {
1627  @State message1: string =
1628    "They can be classified as built-in components–those directly provided by the ArkUI framework and custom components – those defined by developers" +
1629      "The built-in components include buttons radio buttonsprogress indicators and text You can set the rendering effectof thesecomponents in method chaining mode," +
1630      "page components are divided into independent UI units to implementindependent creation development and reuse of different units on pages making pages more engineering-oriented."
1631  @State lineBreakStrategyIndex: number = 0
1632  @State lineBreakStrategy: LineBreakStrategy[] =
1633    [LineBreakStrategy.GREEDY, LineBreakStrategy.HIGH_QUALITY, LineBreakStrategy.BALANCED]
1634  @State lineBreakStrategyStr: string[] = ['GREEDY', 'HIGH_QUALITY', 'BALANCED']
1635
1636  build() {
1637    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start }) {
1638      Text('lineBreakStrategy').fontSize(9).fontColor(0xCCCCCC)
1639      TextArea({ text: this.message1 })
1640        .fontSize(12)
1641        .border({ width: 1 })
1642        .padding(10)
1643        .width('100%')
1644        .lineBreakStrategy(this.lineBreakStrategy[this.lineBreakStrategyIndex])
1645      Row() {
1646        Button('当前lineBreakStrategy模式:' + this.lineBreakStrategyStr[this.lineBreakStrategyIndex]).onClick(() => {
1647          this.lineBreakStrategyIndex++
1648          if (this.lineBreakStrategyIndex > (this.lineBreakStrategyStr.length - 1)) {
1649            this.lineBreakStrategyIndex = 0
1650          }
1651        })
1652      }.padding({ top: 10 })
1653    }.height(700).width(370).padding({ left: 35, right: 35, top: 35 })
1654  }
1655}
1656```
1657
1658![textAreaLineBreakStrategy](figures/textAreaLineBreakStrategy.gif)
1659
1660### 示例14
1661
1662该示例展示输入框支持插入和删除回调。
1663
1664```ts
1665// xxx.ets
1666@Entry
1667@Component
1668struct TextAreaExample {
1669  @State insertValue: string = ""
1670  @State deleteValue: string = ""
1671  @State insertOffset: number = 0
1672  @State deleteOffset: number = 0
1673  @State deleteDirection: number = 0
1674
1675  build() {
1676    Row() {
1677      Column() {
1678        TextArea({ text: "TextArea支持插入回调文本" })
1679          .width(300)
1680          .height(60)
1681          .onWillInsert((info: InsertValue) => {
1682            this.insertValue = info.insertValue
1683            return true;
1684          })
1685          .onDidInsert((info: InsertValue) => {
1686            this.insertOffset = info.insertOffset
1687          })
1688
1689        Text("insertValue:" + this.insertValue + "  insertOffset:" + this.insertOffset).height(30)
1690
1691        TextArea({ text: "TextArea支持删除回调文本b" })
1692          .width(300)
1693          .height(60)
1694          .onWillDelete((info: DeleteValue) => {
1695            this.deleteValue = info.deleteValue
1696            info.direction
1697            return true;
1698          })
1699          .onDidDelete((info: DeleteValue) => {
1700            this.deleteOffset = info.deleteOffset
1701            this.deleteDirection = info.direction
1702          })
1703
1704        Text("deleteValue:" + this.deleteValue + "  deleteOffset:" + this.deleteOffset).height(30)
1705        Text("deleteDirection:" + (this.deleteDirection == 0 ? "BACKWARD" : "FORWARD")).height(30)
1706
1707      }.width('100%')
1708    }
1709    .height('100%')
1710  }
1711}
1712```
1713
1714![TextAreaInsertAndDelete](figures/TextAreaInsertAndDelete.PNG)
1715
1716### 示例15
1717
1718editMenuOptions使用示例,展示设置自定义菜单扩展项的文本内容、图标、回调方法。
1719
1720```ts
1721// xxx.ets
1722@Entry
1723@Component
1724struct TextAreaExample {
1725  @State text: string = 'TextArea editMenuOptions'
1726
1727  onCreateMenu(menuItems: Array<TextMenuItem>) {
1728    menuItems.forEach((value, index) => {
1729      value.icon = $r('app.media.startIcon')
1730      if (value.id.equals(TextMenuItemId.COPY)) {
1731        value.content = "复制change"
1732      }
1733      if (value.id.equals(TextMenuItemId.SELECT_ALL)) {
1734        value.content = "全选change"
1735      }
1736    })
1737    let item1: TextMenuItem = {
1738      content: 'custom1',
1739      icon: $r('app.media.startIcon'),
1740      id: TextMenuItemId.of('custom1'),
1741    }
1742    let item2: TextMenuItem = {
1743      content: 'custom2',
1744      id: TextMenuItemId.of('custom2'),
1745      icon: $r('app.media.startIcon'),
1746    }
1747    menuItems.push(item1)
1748    menuItems.unshift(item2)
1749    return menuItems
1750  }
1751
1752  build() {
1753    Column() {
1754      TextArea({ text: this.text })
1755        .width('95%')
1756        .height(56)
1757        .editMenuOptions({
1758          onCreateMenu: this.onCreateMenu, onMenuItemClick: (menuItem: TextMenuItem, textRange: TextRange) => {
1759            if (menuItem.id.equals(TextMenuItemId.of("custom2"))) {
1760              console.log("拦截 id: custom2 start:" + textRange.start + "; end:" + textRange.end)
1761              return true;
1762            }
1763            if (menuItem.id.equals(TextMenuItemId.COPY)) {
1764              console.log("拦截 COPY start:" + textRange.start + "; end:" + textRange.end)
1765              return true;
1766            }
1767            if (menuItem.id.equals(TextMenuItemId.SELECT_ALL)) {
1768              console.log("不拦截 SELECT_ALL start:" + textRange.start + "; end:" + textRange.end)
1769              return false;
1770            }
1771            return false;
1772          }
1773        })
1774        .margin({ top: 100 })
1775    }
1776    .width("90%")
1777    .margin("5%")
1778  }
1779}
1780```
1781
1782![textAreaEditMenuOptions](figures/textAreaEditMenuOptions.gif)
1783
1784