• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# TextInput
2
3单行文本输入框组件。
4
5>  **说明:**
6>
7>  该组件从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
8
9
10## 子组件
11
1213
14
15## 接口
16
17TextInput(value?: TextInputOptions)
18
19**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
20
21**系统能力:** SystemCapability.ArkUI.ArkUI.Full
22
23**参数:**
24
25| 参数名 | 类型 | 必填 | 说明 |
26| ----- | ----- | ---- | ---- |
27| value | [TextInputOptions](#textinputoptions对象说明) | 否  | TextInput组件参数。 |
28
29## TextInputOptions对象说明
30
31**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
32
33**系统能力:** SystemCapability.ArkUI.ArkUI.Full
34
35| 名称 | 类型  | 必填   | 说明 |
36| ---- | ----- | ---- | ---- |
37| placeholder             | [ResourceStr](ts-types.md#resourcestr)   | 否    | 设置无输入时的提示文本。                             |
38| text                    | [ResourceStr](ts-types.md#resourcestr)   | 否    | 设置输入框当前的文本内容。</br>建议通过onChange事件将状态变量与文本实时绑定,</br>避免组件刷新时TextInput中的文本内容异常。<br />从API version 10开始,该参数支持[$$](../../../ui/state-management/arkts-two-way-sync.md)双向绑定变量。<br />从API version 18开始,该参数支持[!!](../../../ui/state-management/arkts-new-binding.md#系统组件参数双向绑定)双向绑定变量。 |
39| controller<sup>8+</sup> | [TextInputController](#textinputcontroller8) | 否    | 设置TextInput控制器。                          |
40
41## 属性
42
43除支持[通用属性](ts-component-general-attributes.md),还支持以下属性:
44
45>  **说明:**
46>  默认情况下,通用属性[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> }
47>
48>  输入框开启下划线模式时,通用属性padding的默认值为:<br>{<br>&nbsp;top: '12vp',<br>&nbsp;right: '0vp',<br>&nbsp;bottom: '12vp',<br>&nbsp;left: '0vp'<br> }
49>
50>  当输入框设置padding为0时,可设置borderRadius为0避免光标被截断。
51>
52>   从API version 10开始,单行输入框可设置.width('auto')使组件宽度自适应文本宽度,自适应时组件宽度受constraintSize属性以及父容器传递的最大最小宽度限制,其余使用方式参考[尺寸设置](ts-universal-attributes-size.md#属性)。
53
54### type
55
56type(value: InputType)
57
58设置输入框类型。
59
60**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
61
62**系统能力:** SystemCapability.ArkUI.ArkUI.Full
63
64**参数:**
65
66| 参数名 | 类型                            | 必填 | 说明                                      |
67| ------ | ------------------------------- | ---- | ----------------------------------------- |
68| value  | [InputType](#inputtype枚举说明) | 是   | 输入框类型。<br/>默认值:InputType.Normal |
69
70### placeholderColor
71
72placeholderColor(value: ResourceColor)
73
74设置placeholder文本颜色。
75
76**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
77
78**系统能力:** SystemCapability.ArkUI.ArkUI.Full
79
80**参数:**
81
82| 参数名 | 类型                                       | 必填 | 说明                                         |
83| ------ | ------------------------------------------ | ---- | -------------------------------------------- |
84| value  | [ResourceColor](ts-types.md#resourcecolor) | 是   | placeholder文本颜色。<br/>默认值:跟随主题。<br/>Wearable设备上默认值为:'#99ffffff' |
85
86### placeholderFont
87
88placeholderFont(value?: Font)
89
90设置placeholder文本样式,包括字体大小,字体粗细,字体族,字体风格。当前支持'HarmonyOS Sans'字体和[注册自定义字体](../js-apis-font.md)。
91
92**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
93
94**系统能力:** SystemCapability.ArkUI.ArkUI.Full
95
96**参数:**
97
98| 参数名 | 类型                     | 必填 | 说明                  |
99| ------ | ------------------------ | ---- | --------------------- |
100| value  | [Font](ts-types.md#font) | 否   | placeholder文本样式。<br/>Wearable设备上默认值为:18fp |
101
102### enterKeyType
103
104enterKeyType(value: EnterKeyType)
105
106设置输入法回车键类型。
107
108**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
109
110**系统能力:** SystemCapability.ArkUI.ArkUI.Full
111
112**参数:**
113
114| 参数名 | 类型                                             | 必填 | 说明                                             |
115| ------ | ------------------------------------------------ | ---- | ------------------------------------------------ |
116| value  | [EnterKeyType](#enterkeytype枚举说明) | 是   | 输入法回车键类型。<br/>默认值:EnterKeyType.Done |
117
118### caretColor
119
120caretColor(value: ResourceColor)
121
122设置输入框光标颜色。
123
124**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
125
126**系统能力:** SystemCapability.ArkUI.ArkUI.Full
127
128**参数:**
129
130| 参数名 | 类型                                       | 必填 | 说明                                   |
131| ------ | ------------------------------------------ | ---- | -------------------------------------- |
132| value  | [ResourceColor](ts-types.md#resourcecolor) | 是   | 输入框光标颜色。<br/>默认值:'#007DFF' |
133
134>  **说明:**
135>   从API version 12开始,此接口支持设置文本手柄颜色,光标和文本手柄颜色保持一致。
136
137### maxLength
138
139maxLength(value: number)
140
141设置文本的最大输入字符数。
142
143**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
144
145**系统能力:** SystemCapability.ArkUI.ArkUI.Full
146
147**参数:**
148
149| 参数名 | 类型   | 必填 | 说明                                                         |
150| ------ | ------ | ---- | ------------------------------------------------------------ |
151| value  | number | 是   | 文本的最大输入字符数。<br/>默认值:Infinity,可以无限输入。<br/>**说明:** <br/>当不设置该属性或设置异常值时,取默认值,设置小数时,取整数部分。 |
152
153### fontColor
154
155fontColor(value: ResourceColor)
156
157设置字体颜色。
158
159**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
160
161**系统能力:** SystemCapability.ArkUI.ArkUI.Full
162
163**参数:**
164
165| 参数名 | 类型                                       | 必填 | 说明       |
166| ------ | ------------------------------------------ | ---- | ---------- |
167| value  | [ResourceColor](ts-types.md#resourcecolor) | 是   | 字体颜色。<br/>Wearable设备上默认值为:'#dbffffff' |
168
169### fontSize
170
171fontSize(value: Length)
172
173设置字体大小。
174
175**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
176
177**系统能力:** SystemCapability.ArkUI.ArkUI.Full
178
179**参数:**
180
181| 参数名 | 类型                         | 必填 | 说明                                                         |
182| ------ | ---------------------------- | ---- | ------------------------------------------------------------ |
183| value  | [Length](ts-types.md#length) | 是   | 字体大小。fontSize为number类型时,使用fp单位。字体默认大小16fp。不支持设置百分比字符串。<br/>Wearable设备上默认值为:18fp |
184
185### fontStyle
186
187fontStyle(value: FontStyle)
188
189设置字体样式。
190
191**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
192
193**系统能力:** SystemCapability.ArkUI.ArkUI.Full
194
195**参数:**
196
197| 参数名 | 类型                                        | 必填 | 说明                                    |
198| ------ | ------------------------------------------- | ---- | --------------------------------------- |
199| value  | [FontStyle](ts-appendix-enums.md#fontstyle) | 是   | 字体样式。<br/>默认值:FontStyle.Normal |
200
201### fontWeight
202
203fontWeight(value: number | FontWeight | string)
204
205设置文本的字体粗细,设置过大可能会在不同字体下有截断。
206
207**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
208
209**系统能力:** SystemCapability.ArkUI.ArkUI.Full
210
211**参数:**
212
213| 参数名 | 类型                                                         | 必填 | 说明                                                         |
214| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
215| 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 |
216
217### fontFamily
218
219fontFamily(value: ResourceStr)
220
221设置字体列表。
222
223**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
224
225**系统能力:** SystemCapability.ArkUI.ArkUI.Full
226
227**参数:**
228
229| 参数名 | 类型                                   | 必填 | 说明                                                         |
230| ------ | -------------------------------------- | ---- | ------------------------------------------------------------ |
231| value  | [ResourceStr](ts-types.md#resourcestr) | 是   | 字体列表。默认字体'HarmonyOS Sans'。<br>应用当前支持'HarmonyOS Sans'字体和[注册自定义字体](../js-apis-font.md)。<br>卡片当前仅支持'HarmonyOS Sans'字体。 |
232
233### inputFilter<sup>8+</sup>
234
235inputFilter(value: ResourceStr, error?: Callback\<string>)
236
237通过正则表达式设置输入过滤器。匹配表达式的输入允许显示,不匹配的输入将被过滤。仅支持单个字符匹配,不支持字符串匹配。
238
239从API version 11开始,设置inputFilter且输入的字符不为空字符,会导致设置输入框类型(即type接口)附带的文本过滤效果失效。
240
241**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
242
243**系统能力:** SystemCapability.ArkUI.ArkUI.Full
244
245**参数:**
246
247| 参数名 | 类型                                   | 必填 | 说明                               |
248| ------ | -------------------------------------- | ---- | ---------------------------------- |
249| value  | [ResourceStr](ts-types.md#resourcestr) | 是   | 正则表达式。                       |
250| error  | Callback\<string>                | 否   | 正则匹配失败时,返回被过滤的内容。 |
251
252### copyOption<sup>9+</sup>
253
254copyOption(value: CopyOptions)
255
256设置输入的文本是否可复制。设置CopyOptions.None时,当前TextInput中的文字无法被复制、剪切、翻译、分享、搜索和帮写,仅支持粘贴。
257
258设置CopyOptions.None时,不允许拖拽。
259
260**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
261
262**系统能力:** SystemCapability.ArkUI.ArkUI.Full
263
264**参数:**
265
266| 参数名 | 类型                                             | 必填 | 说明                                                         |
267| ------ | ------------------------------------------------ | ---- | ------------------------------------------------------------ |
268| value  | [CopyOptions](ts-appendix-enums.md#copyoptions9) | 是   | 输入的文本是否可复制。<br/>默认值:CopyOptions.LocalDevice,支持设备内复制。 |
269
270### showPasswordIcon<sup>9+</sup>
271
272showPasswordIcon(value: boolean)
273
274设置当密码输入模式时,输入框末尾的图标是否显示。
275
276**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
277
278**系统能力:** SystemCapability.ArkUI.ArkUI.Full
279
280**参数:**
281
282| 参数名 | 类型    | 必填 | 说明                                                        |
283| ------ | ------- | ---- | ----------------------------------------------------------- |
284| value  | boolean | 是   | 密码输入模式时,输入框末尾的图标是否显示。<br/>true表示显示,false表示不显示。<br/>默认值:true |
285
286### style<sup>9+</sup>
287
288style(value: TextInputStyle &nbsp;|&nbsp;TextContentStyle)
289
290设置输入框为默认风格或内联输入风格,内联输入风格只支持InputType.Normal类型。
291
292**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
293
294**系统能力:** SystemCapability.ArkUI.ArkUI.Full
295
296**参数:**
297
298| 参数名 | 类型                                                         | 必填 | 说明                                                         |
299| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
300| value  | [TextInputStyle](#textinputstyle9枚举说明)&nbsp;\|&nbsp;[TextContentStyle](ts-appendix-enums.md#textcontentstyle10) | 是   | 输入框为默认风格或内联输入风格。<br/>默认值:TextInputStyle.Default |
301
302### textAlign<sup>9+</sup>
303
304textAlign(value: TextAlign)
305
306设置文本在输入框中的水平对齐方式。
307
308仅支持TextAlign.StartTextAlign.CenterTextAlign.End309
310可通过[align](ts-universal-attributes-location.md)属性控制文本段落在垂直方向上的位置,此组件中不可通过align属性控制文本段落在水平方向上的位置,即align属性中Alignment.TopStartAlignment.TopAlignment.TopEnd效果相同,控制内容在顶部,Alignment.StartAlignment.CenterAlignment.End效果相同,控制内容垂直居中,Alignment.BottomStartAlignment.BottomAlignment.BottomEnd效果相同,控制内容在底部。
311
312**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
313
314**系统能力:** SystemCapability.ArkUI.ArkUI.Full
315
316**参数:**
317
318| 参数名 | 类型                                        | 必填 | 说明                                                       |
319| ------ | ------------------------------------------- | ---- | ---------------------------------------------------------- |
320| value  | [TextAlign](ts-appendix-enums.md#textalign) | 是   | 文本在输入框中的水平对齐方式。<br/>默认值:TextAlign.Start |
321
322### selectedBackgroundColor<sup>10+</sup>
323
324selectedBackgroundColor(value: ResourceColor)
325
326设置文本选中底板颜色。如果未设置不透明度,默认为20%不透明度。
327
328**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
329
330**系统能力:** SystemCapability.ArkUI.ArkUI.Full
331
332**参数:**
333
334| 参数名 | 类型                                       | 必填 | 说明                                       |
335| ------ | ------------------------------------------ | ---- | ------------------------------------------ |
336| value  | [ResourceColor](ts-types.md#resourcecolor) | 是   | 文本选中底板颜色。<br/>默认为20%不透明度。 |
337
338### caretStyle<sup>10+</sup>
339
340caretStyle(value: CaretStyle)
341
342设置光标风格。
343
344**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
345
346**系统能力:** SystemCapability.ArkUI.ArkUI.Full
347
348**参数:**
349
350| 参数名 | 类型                                | 必填 | 说明         |
351| ------ | ----------------------------------- | ---- | ------------ |
352| value  | [CaretStyle](ts-text-common.md#caretstyle10) | 是   | 光标的风格。 |
353
354### caretPosition<sup>10+</sup>
355
356caretPosition(value: number)
357
358设置光标位置。
359
360**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
361
362**系统能力:** SystemCapability.ArkUI.ArkUI.Full
363
364**参数:**
365
366| 参数名 | 类型   | 必填 | 说明         |
367| ------ | ------ | ---- | ------------ |
368| value  | number | 是   | 光标的位置。<br/>第一个字符前的位置是0。 |
369
370### showUnit<sup>10+</sup>
371
372showUnit(value: CustomBuilder)
373
374设置控件作为文本框单位。需搭配[showUnderline](#showunderline10)使用,当showUnderline为true时生效。
375
376**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
377
378**系统能力:** SystemCapability.ArkUI.ArkUI.Full
379
380**参数:**
381
382| 参数名 | 类型                                        | 必填 | 说明                           |
383| ------ | ------------------------------------------- | ---- | ------------------------------ |
384| value  | [CustomBuilder](ts-types.md#custombuilder8) | 是   | 文本输入时,文本框的显示单位。 |
385
386### showError<sup>10+</sup>
387
388showError(value?: ResourceStr | undefined)
389
390设置错误状态下提示的错误文本或者不显示错误状态。
391
392当参数类型为ResourceStr并且输入内容不符合定义规范时,提示错误文本,当提示错误单行文本超长时,末尾以省略号显示。当参数类型为undefined时,不显示错误状态。请参考[示例2](#示例2设置下划线)。
393
394**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
395
396**系统能力:** SystemCapability.ArkUI.ArkUI.Full
397
398**参数:**
399
400| 参数名 | 类型                          | 必填 | 说明                                                         |
401| ------ | ----------------------------- | ---- | ------------------------------------------------------------ |
402| value  | [ResourceStr](ts-types.md#resourcestr)&nbsp;\|&nbsp;undefined | 否   | 错误状态下提示的错误文本或者不显示错误状态。<br/>默认不显示错误状态。<br/>Wearable设备上字体大小为:13fp,对齐方式为:居中对齐<br/>**说明:** <br/>从API version 12开始,value支持Resource类型。 |
403
404### showUnderline<sup>10+</sup>
405
406showUnderline(value: boolean)
407
408设置是否开启下划线。
409
410**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
411
412**系统能力:** SystemCapability.ArkUI.ArkUI.Full
413
414**参数:**
415
416| 参数名 | 类型    | 必填 | 说明                               |
417| ------ | ------- | ---- | ---------------------------------- |
418| value  | boolean | 是   | 是否开启下划线。<br/>true表示开启,false表示不开启。<br/>默认值:false<br/>下划线默认颜色为'#33182431',默认粗细为1px,文本框尺寸48vp,下划线只支持InputType.Normal类型。 |
419
420### passwordIcon<sup>10+</sup>
421
422passwordIcon(value: PasswordIcon)
423
424设置当密码输入模式时,输入框末尾的图标。
425
426支持jpg、png、bmp、heic和webp类型的图片格式。
427
428**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
429
430**系统能力:** SystemCapability.ArkUI.ArkUI.Full
431
432**参数:**
433
434| 参数名 | 类型                                    | 必填 | 说明                                                         |
435| ------ | --------------------------------------- | ---- | ------------------------------------------------------------ |
436| value  | [PasswordIcon](#passwordicon10对象说明) | 是   | 密码输入模式时,输入框末尾的图标。<br/>默认为系统提供的密码图标。<br/>该图标的固定尺寸为24vp,Wearable设备上默认值为28vp,若引用的图标过大或过小,均显示为固定尺寸。 |
437
438### enableKeyboardOnFocus<sup>10+</sup>
439
440enableKeyboardOnFocus(value: boolean)
441
442设置TextInput通过点击以外的方式获焦时,是否主动拉起软键盘。
443
444从API version 10开始,获焦默认绑定输入法。
445
446**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
447
448**系统能力:** SystemCapability.ArkUI.ArkUI.Full
449
450**参数:**
451
452| 参数名 | 类型    | 必填 | 说明                                                        |
453| ------ | ------- | ---- | ----------------------------------------------------------- |
454| value  | boolean | 是   | 通过点击以外的方式获焦时,是否主动拉起软键盘。<br/>默认值:true |
455
456### selectionMenuHidden<sup>10+</sup>
457
458selectionMenuHidden(value: boolean)
459
460设置是否隐藏系统文本选择菜单。
461
462**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
463
464**系统能力:** SystemCapability.ArkUI.ArkUI.Full
465
466**参数:**
467
468| 参数名 | 类型    | 必填 | 说明                                                         |
469| ------ | ------- | ---- | ------------------------------------------------------------ |
470| value  | boolean | 是   | 是否隐藏系统文本选择菜单。<br />设置为true时,单击输入框光标、长按输入框、双击输入框、三击输入框或者右键输入框,隐藏系统文本选择菜单。<br />设置为false时,显示系统文本选择菜单。<br />默认值:false |
471
472### barState<sup>10+</sup>
473
474barState(value: BarState)
475
476设置内联输入风格编辑态时滚动条的显示模式。
477
478**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
479
480**系统能力:** SystemCapability.ArkUI.ArkUI.Full
481
482**参数:**
483
484| 参数名 | 类型                                      | 必填 | 说明                                                         |
485| ------ | ----------------------------------------- | ---- | ------------------------------------------------------------ |
486| value  | [BarState](ts-appendix-enums.md#barstate) | 是   | 内联输入风格编辑态时滚动条的显示模式。<br/>默认值:BarState.Auto |
487
488### maxLines<sup>10+</sup>
489
490maxLines(value: number)
491
492设置内联输入风格编辑态时文本可显示的最大行数。
493
494**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
495
496**系统能力:** SystemCapability.ArkUI.ArkUI.Full
497
498**参数:**
499
500| 参数名 | 类型                                      | 必填 | 说明                                                         |
501| ------ | ----------------------------------------- | ---- | ------------------------------------------------------------ |
502| value  | number | 是   | 内联输入风格编辑态时文本可显示的最大行数。<br/>默认值:3 <br/>取值范围:(0, +∞) |
503
504### customKeyboard<sup>10+</sup>
505
506customKeyboard(value: CustomBuilder, options?: KeyboardOptions)
507
508设置自定义键盘。
509
510当设置自定义键盘时,输入框激活后不会打开系统输入法,而是加载指定的自定义组件。
511
512自定义键盘的高度可以通过自定义组件根节点的height属性设置,宽度不可设置,使用系统默认值。
513
514自定义键盘采用覆盖原始界面的方式呈现,当没有开启避让模式或者输入框不需要避让的场景不会对应用原始界面产生压缩或者上提。
515
516自定义键盘无法获取焦点,但是会拦截手势事件。
517
518默认在输入控件失去焦点时,关闭自定义键盘,开发者也可以通过[TextInputController](#textinputcontroller8).[stopEditing](#stopediting10)方法控制键盘关闭。
519
520如果设备支持拍摄输入,设置自定义键盘后,该输入框会不支持拍摄输入。
521
522当设置自定义键盘时,可以通过绑定[onKeyPrelme](ts-universal-events-key.md#onkeypreime12)事件规避物理键盘的输入。
523
524**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
525
526**系统能力:** SystemCapability.ArkUI.ArkUI.Full
527
528**参数:**
529
530| 参数名                | 类型                                        | 必填 | 说明                                                         |
531| --------------------- | ------------------------------------------- | ---- | ------------------------------------------------------------ |
532| value                 | [CustomBuilder](ts-types.md#custombuilder8) | 是   | 自定义键盘。<br/>**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 |
533| options<sup>12+</sup> | [KeyboardOptions](ts-basic-components-richeditor.md#keyboardoptions12)       | 否   | 设置自定义键盘是否支持避让功能。                             |
534
535### enableAutoFill<sup>11+</sup>
536
537enableAutoFill(value: boolean)
538
539设置是否启用自动填充。
540
541**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
542
543**系统能力:** SystemCapability.ArkUI.ArkUI.Full
544
545**参数:**
546
547| 参数名 | 类型    | 必填 | 说明                                                         |
548| ------ | ------- | ---- | ------------------------------------------------------------ |
549| value  | boolean | 是   | 是否启用自动填充。<br/>true表示启用,false表示不启用。<br/>默认值:true |
550
551### passwordRules<sup>11+</sup>
552
553passwordRules(value: string)
554
555定义生成密码的规则。在触发自动填充时,所设置的密码规则会透传给密码保险箱,用于新密码的生成。<!--RP1--><!--RP1End-->
556
557**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
558
559**系统能力:** SystemCapability.ArkUI.ArkUI.Full
560
561**参数:**
562
563| 参数名 | 类型   | 必填 | 说明                 |
564| ------ | ------ | ---- | -------------------- |
565| value  | string | 是   | 定义生成密码的规则。 |
566
567### cancelButton<sup>11+</sup>
568
569cancelButton(options: CancelButtonOptions)
570
571设置右侧清除按钮样式。不支持内联模式。
572
573**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
574
575**系统能力:** SystemCapability.ArkUI.ArkUI.Full
576
577**参数:**
578
579| 参数名 | 类型                                                         | 必填 | 说明                                                         |
580| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
581| options  | [CancelButtonOptions](ts-basic-components-search.md#cancelbuttonoptions12对象说明) | 是   | 右侧清除按钮样式选项。<br />默认值:<br />{<br />style: CancelButtonStyle.INPUT<br />}<br/>Wearable设备上默认值为:28vp |
582
583### selectAll<sup>11+</sup>
584
585selectAll(value: boolean)
586
587设置当初始状态,是否全选文本。不支持内联模式。
588
589**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
590
591**系统能力:** SystemCapability.ArkUI.ArkUI.Full
592
593**参数:**
594
595| 参数名 | 类型    | 必填 | 说明                              |
596| ------ | ------- | ---- | --------------------------------- |
597| value  | boolean | 是   | 是否全选文本。<br />默认值:false |
598
599### showCounter<sup>11+</sup>
600
601showCounter(value: boolean, options?: InputCounterOptions)
602
603设置当通过InputCounterOptions输入的字符数超过阈值时显示计数器。
604
605参数value为true时,才能设置options,文本框开启计数下标功能,需要配合maxLength(设置最大字符限制)一起使用。字符计数器显示的效果是当前输入字符数/最大可输入字符数。
606
607当输入字符数大于最大字符数乘百分比值时,显示字符计数器。如果用户设置计数器时不设置InputCounterOptions,那么当前输入字符数超过最大字符数时,边框和计数器下标将变为红色。用户同时设置参数value为true和InputCounterOptions,当thresholdPercentage数值在有效区间内,且输入字符数超过最大字符数时,边框和计数器下标将变为红色,框体抖动。highlightBorder设置为false,则不显示红色边框,计数器默认显示红色,框体抖动。
608
609内联模式和密码模式下字符计数器不显示。
610
611**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
612
613**系统能力:** SystemCapability.ArkUI.ArkUI.Full
614
615**参数:**
616
617| 参数名                | 类型                                                  | 必填 | 说明             |
618| --------------------- | ----------------------------------------------------- | ---- | ---------------- |
619| value                 | boolean                                               | 是   | 是否显示计数器。 |
620| options<sup>11+</sup> | [InputCounterOptions](ts-types.md#inputcounteroptions11对象说明) | 否   | 计数器的百分比。 |
621
622### contentType<sup>12+</sup>
623
624contentType(value: ContentType)
625
626设置自动填充类型。
627
628**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
629
630**系统能力:** SystemCapability.ArkUI.ArkUI.Full
631
632**参数:**
633
634| 参数名 | 类型                                  | 必填 | 说明           |
635| ------ | ------------------------------------- | ---- | -------------- |
636| value  | [ContentType](#contenttype12枚举说明) | 是   | 自动填充类型。 |
637
638### underlineColor<sup>12+</sup>
639
640underlineColor(value: ResourceColor|UnderlineColor|undefined)
641
642开启下划线时,支持配置下划线颜色。
643
644**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
645
646**系统能力:** SystemCapability.ArkUI.ArkUI.Full
647
648| 参数名 | 类型                                                         | 必填 | 说明                                                         |
649| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
650| value  | [ResourceColor](ts-types.md#resourcecolor) \| [UnderlineColor](#underlinecolor12对象说明) \| undefined | 是   | 设置下划线颜色。<br/>当设置下划线颜色模式时,修改下划线颜色。当只设定非特殊状态下的颜色,可以直接输入ResourceColor。设定值为undefined、null、无效值时,所有下划线恢复为默认值。<br/>默认值:主题配置的下划线颜色。主题配置的默认下滑颜色为'#33182431'。 |
651
652### lineHeight<sup>12+</sup>
653
654lineHeight(value: number | string | Resource)
655
656设置文本的文本行高,设置值不大于0时,不限制文本行高,自适应字体大小,number类型时单位为fp。string类型支持number类型取值的字符串形式,可以附带单位,例如"10"、"10fp"。
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### decoration<sup>12+</sup>
669
670decoration(value: TextDecorationOptions)
671
672设置文本装饰线类型样式及其颜色。密码模式不生效。
673
674**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
675
676**系统能力:** SystemCapability.ArkUI.ArkUI.Full
677
678**参数:**
679
680| 参数名 | 类型                                                         | 必填 | 说明                                                         |
681| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
682| 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/>} |
683
684### letterSpacing<sup>12+</sup>
685
686letterSpacing(value: number | string | Resource)
687
688设置文本字符间距。设置该值为百分比时,按默认值显示。设置该值为0时,按默认值显示。string类型支持number类型取值的字符串形式,可以附带单位,例如"10"、"10fp"。
689
690当取值为负值时,文字会发生压缩,负值过小时会将组件内容区大小压缩为0,导致无内容显示。
691
692**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
693
694**系统能力:** SystemCapability.ArkUI.ArkUI.Full
695
696**参数:**
697
698| 参数名 | 类型                       | 必填 | 说明           |
699| ------ | -------------------------- | ---- | -------------- |
700| value  | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 是   | 文本字符间距。<br/>单位:fp |
701
702### fontFeature<sup>12+</sup>
703
704fontFeature(value: string)
705
706设置文字特性效果,比如数字等宽的特性。
707
708格式为:normal \| \<feature-tag-value\>
709
710\<feature-tag-value\>的格式为:\<string\> \[ \<integer\> \| on \| off ]
711
712\<feature-tag-value\>的个数可以有多个,中间用','隔开。
713
714例如,使用等宽数字的输入格式为:"ss01" on。
715
716**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
717
718**系统能力:** SystemCapability.ArkUI.ArkUI.Full
719
720**参数:**
721
722| 参数名 | 类型   | 必填 | 说明           |
723| ------ | ------ | ---- | -------------- |
724| value  | string | 是   | 文字特性效果。 |
725
726Font Feature当前支持的属性见 [fontFeature属性列表](ts-basic-components-text.md#fontfeature12)。
727设置 Font Feature 属性,Font Feature 是 OpenType 字体的高级排版能力,如支持连字、数字等宽等特性,一般用在自定义字体中,其能力需要字体本身支持。
728更多 Font Feature 能力介绍可参考 https://www.w3.org/TR/css-fonts-3/#font-feature-settings-prophttps://sparanoid.com/lab/opentype-features/
729
730>  **说明:**
731>  type属性中InputType枚举为Password、NEW_PASSWORD和NUMBER_PASSWORD等密码模式时,暂时不支持fontFeature设置文本样式。
732
733### wordBreak<sup>12+</sup>
734
735wordBreak(value: WordBreak)
736
737设置文本断行规则。该属性在组件设置内联模式时样式生效,但对placeholder文本无效。
738
739**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
740
741**系统能力:** SystemCapability.ArkUI.ArkUI.Full
742
743**参数:**
744
745| 参数名 | 类型                                          | 必填 | 说明                                          |
746| ------ | --------------------------------------------- | ---- | --------------------------------------------- |
747| value  | [WordBreak](ts-appendix-enums.md#wordbreak11) | 是   | 内联输入风格编辑态时断行规则。 <br />默认值:WordBreak.BREAK_WORD |
748
749>  **说明:**
750>
751>  组件不支持clip属性设置,设置该属性任意枚举值对组件文本截断无影响。
752
753### textOverflow<sup>12+</sup>
754
755textOverflow(value: TextOverflow)
756
757设置文本超长时的显示方式。仅在内联模式的编辑态、非编辑态下支持。
758
759文本截断是按字截断。例如,英文以单词为最小单位进行截断,若需要以字母为单位进行截断,wordBreak属性可设置为WordBreak.BREAK_ALL760
761当overflow设置TextOverflow.NoneTextOverflow.Clip效果一样。
762
763**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
764
765**系统能力:** SystemCapability.ArkUI.ArkUI.Full
766
767**参数:**
768
769| 参数名 | 类型                                                          | 必填 | 说明                                                                                                |
770| ------ | ------------------------------------------------------------ | ---- | -------------------------------------------------------------------------------------------------- |
771| value  | [TextOverflow](ts-appendix-enums.md#textoverflow)            | 是   | 文本超长时的显示方式。<br/>内联模式非编辑态下默认值:TextOverflow.Ellipsis <br/>内联模式编辑态下默认值:TextOverflow.Clip                     |
772
773>  **说明:**
774>   TextInput组件不支持设置TextOverflow.MARQUEE模式,当设置为TextOverflow.MARQUEE模式时 内联模式非编辑态下显示为TextOverflow.Ellipsis,内联模式编辑态下以及非内联模式下显示为TextOverflow.Clip
775
776### textIndent<sup>12+</sup>
777
778textIndent(value: Dimension)
779
780设置首行文本缩进。
781
782**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
783
784**系统能力:** SystemCapability.ArkUI.ArkUI.Full
785
786**参数:**
787
788| 参数名 | 类型                                  | 必填 | 说明                         |
789| ------ | ------------------------------------ | ---- | ---------------------------- |
790| value  | [Dimension](ts-types.md#dimension10) | 是   | 首行文本缩进。<br/>默认值:0 |
791
792### minFontSize<sup>12+</sup>
793
794minFontSize(value: number | string | Resource)
795
796设置文本最小显示字号。string类型支持number类型取值的字符串形式,可以附带单位,例如"10"、"10fp"。
797
798需配合[maxFontSize](#maxfontsize12)以及[maxLines](#maxlines10)(组件设置为内联输入风格且编辑态时使用)或布局大小限制使用,单独设置不生效。
799
800自适应字号生效时,fontSize设置不生效。
801
802**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
803
804**系统能力:** SystemCapability.ArkUI.ArkUI.Full
805
806**参数:**
807
808| 参数名 | 类型                                                         | 必填 | 说明               |
809| ------ | ------------------------------------------------------------ | ---- | ------------------ |
810| value  | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 是   | 文本最小显示字号。<br/>单位:fp |
811
812### maxFontSize<sup>12+</sup>
813
814maxFontSize(value: number | string | Resource)
815
816设置文本最大显示字号。string类型支持number类型取值的字符串形式,可以附带单位,例如"10"、"10fp"。
817
818需配合[minFontSize](#minfontsize12)以及[maxLines](#maxlines10)(组件设置为内联输入风格且编辑态时使用)或布局大小限制使用,单独设置不生效。
819
820自适应字号生效时,fontSize设置不生效。
821
822**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
823
824**系统能力:** SystemCapability.ArkUI.ArkUI.Full
825
826**参数:**
827
828| 参数名 | 类型                                                         | 必填 | 说明               |
829| ------ | ------------------------------------------------------------ | ---- | ------------------ |
830| value  | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 是   | 文本最大显示字号。<br/>单位:fp |
831
832### heightAdaptivePolicy<sup>12+</sup>
833
834heightAdaptivePolicy(value: TextHeightAdaptivePolicy)
835
836组件设置为内联输入风格时,设置文本自适应高度的方式。
837
838当设置为TextHeightAdaptivePolicy.MAX_LINES_FIRST时,优先使用[maxLines](#maxlines10)属性来调整文本高度。如果使用maxLines属性的布局大小超过了布局约束,则尝试在[minFontSize](#minfontsize12)和[maxFontSize](#maxfontsize12)的范围内缩小字体以显示更多文本。
839
840当设置为TextHeightAdaptivePolicy.MIN_FONT_SIZE_FIRST时,优先使用minFontSize属性来调整文本高度。如果使用minFontSize属性可以将文本布局在一行中,则尝试在minFontSize和maxFontSize的范围内增大字体并使用最大可能的字体大小。
841
842当设置为TextHeightAdaptivePolicy.LAYOUT_CONSTRAINT_FIRST时,与TextHeightAdaptivePolicy.MIN_FONT_SIZE_FIRST效果一样。
843
844组件设置为非内联输入风格时,设置文本自适应高度(TextHeightAdaptivePolicy)的三种方式效果一样,即在minFontSize和maxFontSize的范围内缩小字体以显示更多文本。
845
846>  **说明:**
847>
848>  组件设置为内联输入风格,编辑态与非编辑态存在字体大小不一致情况。
849
850**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
851
852**系统能力:** SystemCapability.ArkUI.ArkUI.Full
853
854**参数:**
855
856| 参数名 | 类型                                                         | 必填 | 说明                                                         |
857| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
858| value  | [TextHeightAdaptivePolicy](ts-appendix-enums.md#textheightadaptivepolicy10) | 是   | 文本自适应高度的方式。<br/>默认值:TextHeightAdaptivePolicy.MAX_LINES_FIRST |
859
860### showPassword<sup>12+</sup>
861
862showPassword(visible: boolean)
863
864设置密码的显隐状态。
865
866当[输入框的类型](#inputtype枚举说明)设置为Password、NEW_PASSWORD和NUMBER_PASSWORD模式时,密码保护功能才能生效。非密码输入模式则不会触发该功能。
867
868密码模式时,由于输入框后端的状态和前端应用侧的状态管理变量会不一致,可能导致末尾图标的状态异常。建议在[onSecurityStateChange](#onsecuritystatechange12)上增加状态同步。参考[示例1](#示例1设置与获取光标位置)。
869
870**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
871
872**系统能力:** SystemCapability.ArkUI.ArkUI.Full
873
874**参数:**
875
876| 参数名 | 类型                                                         | 必填 | 说明                                                         |
877| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
878| visible  | boolean | 是  | 是否显示密码。<br/>默认值:false |
879
880### lineBreakStrategy<sup>12+</sup>
881
882lineBreakStrategy(strategy: LineBreakStrategy)
883
884设置折行规则。该属性在wordBreak不等于breakAll的时候生效,不支持连词符。
885
886**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
887
888**系统能力:** SystemCapability.ArkUI.ArkUI.Full
889
890**参数:**
891
892| 参数名   | 类型                                                         | 必填 | 说明                                                         |
893| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
894| strategy | [LineBreakStrategy](ts-appendix-enums.md#linebreakstrategy12) | 是   | 文本的折行规则。 <br />默认值:LineBreakStrategy.GREEDY <br/>**说明:**<br/>仅设置内联模式时该属性生效。 |
895
896### editMenuOptions<sup>12+</sup>
897
898editMenuOptions(editMenu: EditMenuOptions)
899
900设置自定义菜单扩展项,允许用户设置扩展项的文本内容、图标、回调方法。
901
902**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
903
904**系统能力:** SystemCapability.ArkUI.ArkUI.Full
905
906**参数:**
907
908| 参数名 | 类型                                          | 必填 | 说明                                          |
909| ------ | --------------------------------------------- | ---- | --------------------------------------------- |
910| editMenu  | [EditMenuOptions](ts-text-common.md#editmenuoptions) | 是   | 扩展菜单选项。 |
911
912### enablePreviewText<sup>12+</sup>
913
914enablePreviewText(enable: boolean)
915
916设置是否开启输入预上屏。
917
918预上屏内容定义为文字暂存态,目前不支持文字拦截功能,因此不触发onWillInsert、onDidInsert、onWillDelete、onDidDelete回调。
919
920**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
921
922**系统能力:** SystemCapability.ArkUI.ArkUI.Full
923
924**参数:**
925
926| 参数名 | 类型    | 必填 | 说明                               |
927| ------ | ------- | ---- | ---------------------------------- |
928| enable | boolean | 是   | 是否开启输入预上屏。<br/>默认值:true |
929
930### enableHapticFeedback<sup>13+</sup>
931
932enableHapticFeedback(isEnabled: boolean)
933
934设置是否开启触控反馈。
935
936**原子化服务API:** 从API version 13开始,该接口支持在原子化服务中使用。
937
938**系统能力:** SystemCapability.ArkUI.ArkUI.Full
939
940**参数:**
941
942| 参数名 | 类型    | 必填 | 说明                               |
943| ------ | ------- | ---- | ---------------------------------- |
944| isEnabled | boolean | 是   | 是否开启触控反馈。<br/>默认值:true |
945
946>  **说明:**
947>
948>  开启触控反馈时,需要在工程的module.json5中配置requestPermissions字段以开启振动权限,配置如下:
949> ```json
950> "requestPermissions": [
951>  {
952>     "name": "ohos.permission.VIBRATE",
953>  }
954> ]
955> ```
956
957### keyboardAppearance<sup>15+</sup>
958
959keyboardAppearance(appearance: Optional\<KeyboardAppearance>)
960
961设置输入框拉起的键盘样式。
962
963**原子化服务API:** 从API version 15开始,该接口支持在原子化服务中使用。
964
965**系统能力:** SystemCapability.ArkUI.ArkUI.Full
966
967**参数:**
968
969| 参数名 | 类型 | 必填 | 说明 |
970| ------ | ----------------------------------------- | ---- | ------------------------------------------------------ |
971| appearance | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[KeyboardAppearance](ts-text-common.md#keyboardappearance15枚举说明)> | 是   | 键盘样式。<br/>默认值:KeyboardAppearance.NONE_IMMERSIVE |
972
973### stopBackPress<sup>15+<sup>
974
975stopBackPress(isStopped: Optional\<boolean>)
976
977设置是否阻止返回键向其它组件或应用侧传递。
978
979**原子化服务API:** 从API version 15开始,该接口支持在原子化服务中使用。
980
981**系统能力:** SystemCapability.ArkUI.ArkUI.Full
982
983**参数:**
984
985| 参数名 | 类型                                                | 必填 | 说明                                      |
986| ------ | --------------------------------------------------- | ---- | ----------------------------------------- |
987| isStopped  | [Optional](ts-universal-attributes-custom-property.md#optional12)\<boolean> | 是   | 是否消费返回键。 <br />默认值:true |
988
989### halfLeading<sup>18+</sup>
990
991halfLeading(halfLeading: Optional\<boolean>)
992
993设置文本是否将行间距平分至行的顶部与底部。
994
995**原子化服务API:** 从API version 18开始,该接口支持在原子化服务中使用。
996
997**系统能力:** SystemCapability.ArkUI.ArkUI.Full
998
999**参数:**
1000
1001| 参数名 | 类型                                          | 必填 | 说明                                          |
1002| ------ | --------------------------------------------- | ---- | --------------------------------------------- |
1003| halfLeading | [Optional](ts-universal-attributes-custom-property.md#optional12)\<boolean> | 是  | 文本是否将行间距平分至行的顶部与底部。<br/>true表示将行间距平分至行的顶部与底部,false则不平分。<br/>默认值:false |
1004
1005### minFontScale<sup>18+</sup>
1006
1007minFontScale(scale: Optional\<number | Resource>)
1008
1009设置文本最小的字体缩放倍数。
1010
1011**原子化服务API:** 从API version 18开始,该接口支持在原子化服务中使用。
1012
1013**系统能力:** SystemCapability.ArkUI.ArkUI.Full
1014
1015**参数:**
1016
1017| 参数名 | 类型                                          | 必填 | 说明                                          |
1018| ------ | --------------------------------------------- | ---- | --------------------------------------------- |
1019| scale  | [Optional](ts-universal-attributes-custom-property.md#optional12)\<number \| [Resource](ts-types.md#resource)> | 是   | 文本最小的字体缩放倍数,支持undefined类型。<br/>取值范围:[0, 1]<br/>**说明:** <br/>设置的值小于0时,按值为0处理。设置的值大于1,按值为1处理。异常值默认不生效。<br/>使用前需在工程中配置configuration.json文件和app.json5文件,具体详见[示例18设置最小字体范围与最大字体范围](#示例18设置最小字体范围与最大字体范围)。 |
1020
1021### maxFontScale<sup>18+</sup>
1022
1023maxFontScale(scale: Optional\<number | Resource>)
1024
1025设置文本最大的字体缩放倍数。
1026
1027**原子化服务API:** 从API version 18开始,该接口支持在原子化服务中使用。
1028
1029**系统能力:** SystemCapability.ArkUI.ArkUI.Full
1030
1031**参数:**
1032
1033| 参数名 | 类型                                          | 必填 | 说明                                          |
1034| ------ | --------------------------------------------- | ---- | --------------------------------------------- |
1035| scale  | [Optional](ts-universal-attributes-custom-property.md#optional12)\<number \| [Resource](ts-types.md#resource)> | 是   | 文本最大的字体缩放倍数,支持undefined类型。<br/>取值范围:[1, +∞)<br/>**说明:** <br/>设置的值小于1时,按值为1处理。异常值默认不生效。<br/>使用前需在工程中配置configuration.json文件和app.json5文件,具体详见[示例18设置最小字体范围与最大字体范围](#示例18设置最小字体范围与最大字体范围)。 |
1036
1037### cancelButton<sup>18+</sup>
1038
1039cancelButton(symbolOptions: CancelButtonSymbolOptions)
1040
1041设置右侧清除按钮样式。不支持内联模式。
1042
1043**原子化服务API:** 从API version 18开始,该接口支持在原子化服务中使用。
1044
1045**系统能力:** SystemCapability.ArkUI.ArkUI.Full
1046
1047**参数:**
1048
1049| 参数名 | 类型                                                         | 必填 | 说明                                                         |
1050| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
1051| symbolOptions  | [CancelButtonSymbolOptions](ts-basic-components-search.md#cancelbuttonsymboloptions12对象说明) | 是   | 右侧清除按钮样式。<br />默认值:<br />{<br />style: CancelButtonStyle.INPUT<br />} |
1052
1053### ellipsisMode<sup>18+</sup>
1054
1055ellipsisMode(mode: Optional\<EllipsisMode>)
1056
1057设置省略位置。ellipsisMode属性仅在内联模式下生效,需要配合overflow设置为TextOverflow.Ellipsis使用,单独设置ellipsisMode属性不生效。
1058
1059非编辑态时正常生效,编辑态时EllipsisMode.STARTEllipsisMode.CENTER仅在maxline设置为1时生效,EllipsisMode.END正常生效。
1060
1061**原子化服务API:** 从API version 18开始,该接口支持在原子化服务中使用。
1062
1063**系统能力:** SystemCapability.ArkUI.ArkUI.Full
1064
1065**参数:**
1066
1067| 参数名 | 类型                                                | 必填 | 说明                                      |
1068| ------ | --------------------------------------------------- | ---- | ----------------------------------------- |
1069| mode  | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[EllipsisMode](ts-appendix-enums.md#ellipsismode11)> | 是   | 省略位置。 <br />默认值:EllipsisMode.END |
1070
1071## InputType枚举说明
1072
1073**系统能力:** SystemCapability.ArkUI.ArkUI.Full
1074
1075| 名称                          | 说明                                                     |
1076| ----------------------------- | ------------------------------------------------------------ |
1077| Normal                        | 基本输入模式,无特殊限制。<br/>**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 |
1078| Password                      | 密码输入模式。<br/>密码显示小眼睛图标,默认输入文字短暂显示后变成圆点,从API version 12开始,特定设备上输入文字直接显示为圆点。密码输入模式不支持下划线样式。在已启用密码保险箱的情况下,支持用户名、密码的自动保存和自动填充。<br/>**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 |
1079| Email                         | 邮箱地址输入模式。<br/>支持数字、字母、下划线、小数点、!、#、$、%、&、'、"、*、+、-、/、=、?、^、`、\{、\|、\}、~,以及@字符(只能存在一个@字符)。<br/>**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 |
1080| Number                        | 纯数字输入模式。<br/>**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 |
1081| PhoneNumber<sup>9+</sup>      | 电话号码输入模式。<br/>支持输入数字、空格、+ 、-、*、#、(、),长度不限。<br/>**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 |
1082| USER_NAME<sup>11+</sup>       | 用户名输入模式。<br/>在已启用密码保险箱的情况下,支持用户名、密码的自动保存和自动填充。<br/>**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 |
1083| NEW_PASSWORD<sup>11+</sup>    | 新密码输入模式。<br/>密码显示小眼睛图标,默认输入文字短暂显示后变成圆点,从API version 12开始,特定设备上输入文字直接显示为圆点。在已启用密码保险箱的情况下,支持自动生成新密码。<br/>**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 |
1084| NUMBER_PASSWORD<sup>11+</sup> | 纯数字密码输入模式。<br/>密码显示小眼睛图标,默认输入文字短暂显示后变成圆点,从API version 12开始,特定设备上输入文字直接显示为圆点。密码输入模式不支持下划线样式。<br/>**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 |
1085| NUMBER_DECIMAL<sup>11+</sup>  | 带小数点的数字输入模式。<br/>支持数字,小数点(只能存在一个小数点)。<br/>**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 |
1086| URL<sup>12+</sup>  | 带URL的输入模式。<br/>**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 |
1087
1088## ContentType<sup>12+</sup>枚举说明
1089
1090自动填充类型。
1091
1092**系统能力:** SystemCapability.ArkUI.ArkUI.Full
1093
1094| 名称                       | 值   | 说明                                                         |
1095| -------------------------- | ---- | ------------------------------------------------------------ |
1096| USER_NAME                  | 0    | 【用户名】在已启用密码保险箱的情况下,支持用户名的自动保存和自动填充。<br/>**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 |
1097| PASSWORD                   | 1    | 【密码】在已启用密码保险箱的情况下,支持密码的自动保存和自动填充。<br/>**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 |
1098| NEW_PASSWORD               | 2    | 【新密码】在已启用密码保险箱的情况下,支持自动生成新密码。<br/>**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。   |
1099| FULL_STREET_ADDRESS        | 3    | 【详细地址】在已启用情景化自动填充的情况下,支持详细地址的自动保存和自动填充。<br/>**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 |
1100| HOUSE_NUMBER               | 4    | 【门牌号】在已启用情景化自动填充的情况下,支持门牌号的自动保存和自动填充。<br/>**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 |
1101| DISTRICT_ADDRESS           | 5    | 【区/县】在已启用情景化自动填充的情况下,支持区/县的自动保存和自动填充。<br/>**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 |
1102| CITY_ADDRESS               | 6    | 【市】在已启用情景化自动填充的情况下,支持市的自动保存和自动填充。<br/>**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 |
1103| PROVINCE_ADDRESS           | 7    | 【省】在已启用情景化自动填充的情况下,支持省的自动保存和自动填充。<br/>**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 |
1104| COUNTRY_ADDRESS            | 8    | 【国家】在已启用情景化自动填充的情况下,支持国家的自动保存和自动填充。<br/>**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 |
1105| PERSON_FULL_NAME           | 9    | 【姓名】在已启用情景化自动填充的情况下,支持姓名的自动保存和自动填充。<br/>**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 |
1106| PERSON_LAST_NAME           | 10   | 【姓氏】在已启用情景化自动填充的情况下,支持姓氏的自动保存和自动填充。<br/>**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 |
1107| PERSON_FIRST_NAME          | 11   | 【名字】在已启用情景化自动填充的情况下,支持名字的自动保存和自动填充。<br/>**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 |
1108| PHONE_NUMBER               | 12   | 【手机号码】在已启用情景化自动填充的情况下,支持手机号码的自动保存和自动填充。<br/>**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 |
1109| PHONE_COUNTRY_CODE         | 13   | 【国家代码】在已启用情景化自动填充的情况下,支持国家代码的自动保存和自动填充。<br/>**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 |
1110| FULL_PHONE_NUMBER          | 14   | 【包含国家代码的手机号码】在已启用情景化自动填充的情况下,支持包含国家代码的手机号码的自动保存和自动填充。<br/>**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 |
1111| EMAIL_ADDRESS              | 15   | 【邮箱地址】在已启用情景化自动填充的情况下,支持邮箱地址的自动保存和自动填充。<br/>**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 |
1112| BANK_CARD_NUMBER           | 16   | 【银行卡号】在已启用情景化自动填充的情况下,支持银行卡号的自动保存和自动填充。<br/>**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 |
1113| ID_CARD_NUMBER             | 17   | 【身份证号】在已启用情景化自动填充的情况下,支持身份证号的自动保存和自动填充。<br/>**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 |
1114| NICKNAME                   | 23   | 【昵称】在已启用情景化自动填充的情况下,支持昵称的自动保存和自动填充。<br/>**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 |
1115| DETAIL_INFO_WITHOUT_STREET | 24   | 【无街道地址】在已启用情景化自动填充的情况下,支持无街道地址的自动保存和自动填充。<br/>**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 |
1116| FORMAT_ADDRESS             | 25   | 【标准地址】在已启用情景化自动填充的情况下,支持标准地址的自动保存和自动填充。<br/>**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 |
1117| PASSPORT_NUMBER<sup>18+</sup>            | 26   | 【护照号】在已启用情景化自动填充的情况下,支持护照号的自动保存和自动填充。<br/>**原子化服务API:** 从API version 18开始,该接口支持在原子化服务中使用。 |
1118| VALIDITY<sup>18+</sup>                   | 27   | 【护照有效期】在已启用情景化自动填充的情况下,支持护照有效期的自动保存和自动填充。<br/>**原子化服务API:** 从API version 18开始,该接口支持在原子化服务中使用。 |
1119| ISSUE_AT<sup>18+</sup>                   | 28   | 【护照签发地】在已启用情景化自动填充的情况下,支持护照签发地的自动保存和自动填充。<br/>**原子化服务API:** 从API version 18开始,该接口支持在原子化服务中使用。 |
1120| ORGANIZATION<sup>18+</sup>               | 29   | 【发票抬头名称】在已启用情景化自动填充的情况下,支持发票抬头名称的自动保存和自动填充。<br/>**原子化服务API:** 从API version 18开始,该接口支持在原子化服务中使用。 |
1121| TAX_ID<sup>18+</sup>                     | 30   | 【税号】在已启用情景化自动填充的情况下,支持税号的自动保存和自动填充。<br/>**原子化服务API:** 从API version 18开始,该接口支持在原子化服务中使用。 |
1122| ADDRESS_CITY_AND_STATE<sup>18+</sup>     | 31   | 【所在地区】在已启用情景化自动填充的情况下,支持所在地区的自动保存和自动填充。<br/>**原子化服务API:** 从API version 18开始,该接口支持在原子化服务中使用。 |
1123| FLIGHT_NUMBER<sup>18+</sup>              | 32   | 【航班号】暂不支持自动保存和自动填充。<br/>**原子化服务API:** 从API version 18开始,该接口支持在原子化服务中使用。 |
1124| LICENSE_NUMBER<sup>18+</sup>             | 33   | 【驾驶证号】暂不支持自动保存和自动填充。<br/>**原子化服务API:** 从API version 18开始,该接口支持在原子化服务中使用。 |
1125| LICENSE_FILE_NUMBER<sup>18+</sup>        | 34   | 【驾驶证档案编号】暂不支持自动保存和自动填充。<br/>**原子化服务API:** 从API version 18开始,该接口支持在原子化服务中使用。 |
1126| LICENSE_PLATE<sup>18+</sup>              | 35   | 【车牌号】在已启用情景化自动填充的情况下,支持车牌号的自动保存和自动填充。<br/>**原子化服务API:** 从API version 18开始,该接口支持在原子化服务中使用。 |
1127| ENGINE_NUMBER<sup>18+</sup>              | 36   | 【行驶证发动机号】暂不支持自动保存和自动填充。<br/>**原子化服务API:** 从API version 18开始,该接口支持在原子化服务中使用。 |
1128| LICENSE_CHASSIS_NUMBER<sup>18+</sup>     | 37   | 【车牌识别号】暂不支持自动保存和自动填充。<br/>**原子化服务API:** 从API version 18开始,该接口支持在原子化服务中使用。 |
1129
1130## TextInputStyle<sup>9+</sup>枚举说明
1131
1132**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
1133
1134**系统能力:** SystemCapability.ArkUI.ArkUI.Full
1135
1136| 名称    | 说明                                                         |
1137| ------- | ------------------------------------------------------------ |
1138| Default | 默认风格,光标宽1.5vp,光标高度与文本选中底板高度和字体大小相关。 |
1139| Inline  | 内联输入风格。文本选中底板高度与输入框高度相同。<br/>内联输入是在有明显的编辑态/非编辑态的区分场景下使用,例如:文件列表视图中的重命名。<br/>不支持showError属性。<br/>内联模式下,不支持拖入文本。 |
1140
1141## PasswordIcon<sup>10+</sup>对象说明
1142
1143**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
1144
1145**系统能力:** SystemCapability.ArkUI.ArkUI.Full
1146
1147| 名称 | 类型  | 必填   | 说明 |
1148| ---- | ----- | ---- | ---- |
1149| onIconSrc  | string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 否    | 密码输入模式时,能够切换密码隐藏的显示状态的图标。<br/>string格式可用于加载网络图片和本地图片。 |
1150| offIconSrc | string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 否    | 密码输入模式时,能够切换密码显示的隐藏状态的图标。<br/>string格式可用于加载网络图片和本地图片。 |
1151
1152## EnterKeyType枚举说明
1153
1154输入法回车键类型。
1155
1156**系统能力:** SystemCapability.ArkUI.ArkUI.Full
1157
1158| 名称                   | 值 | 说明               |
1159| ---------------------- | --- | ------------------ |
1160| Go                     | 2 | 显示为开始样式。<br/>**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。   |
1161| Search                 | 3 | 显示为搜索样式。 <br/>**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。  |
1162| Send                   | 4 | 显示为发送样式。 <br/>**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。  |
1163| Next                   | 5 | 显示为下一步样式。<br/>**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 |
1164| Done                   | 6 | 显示为完成样式。 <br/>**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。  |
1165| PREVIOUS<sup>11+</sup> | 7 | 显示为上一步样式。<br/>**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 |
1166| NEW_LINE<sup>11+</sup> | 8 | 显示为换行样式。 <br/>**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。  |
1167
1168
1169## 事件
1170
1171除支持[通用事件](ts-component-general-events.md)外,还支持以下事件:
1172
1173### onChange
1174
1175onChange(callback:&nbsp;EditableTextOnChangeCallback)
1176
1177输入内容发生变化时,触发该回调。
1178
1179在本回调中,若执行了光标操作,需要开发者在预上屏场景下依据previewText参数调整光标逻辑,以适应预上屏场景。
1180
1181**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
1182
1183**系统能力:** SystemCapability.ArkUI.ArkUI.Full
1184
1185**参数:**
1186
1187| 参数名 | 类型   | 必填 | 说明                 |
1188| ------ | ------ | ---- | -------------------- |
1189| callback  | [EditableTextOnChangeCallback](ts-text-common.md#editabletextonchangecallback12) | 是   | 当前输入文本内容变化时的回调。 |
1190
1191### onSubmit
1192
1193onSubmit(callback: OnSubmitCallback)
1194
1195按下输入法回车键触发该回调。
1196
1197**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
1198
1199**系统能力:** SystemCapability.ArkUI.ArkUI.Full
1200
1201**参数:**
1202
1203| 参数名              | 类型                                             | 必填 | 说明                                                         |
1204| ------------------- | ------------------------------------------------ | ---- | ------------------------------------------------------------ |
1205| callback            | [OnSubmitCallback](#onsubmitcallback18) | 是   | 提交回调。 |
1206
1207### onEditChanged<sup>(deprecated)</sup>
1208
1209onEditChanged(callback:&nbsp;(isEditing:&nbsp;boolean)&nbsp;=&gt;&nbsp;void)
1210
1211输入状态变化时,触发该回调。
1212
1213从API 8开始废弃,建议使用onEditChange。
1214
1215**系统能力:** SystemCapability.ArkUI.ArkUI.Full
1216
1217**参数:**
1218
1219| 参数名    | 类型    | 必填 | 说明                 |
1220| --------- | ------- | ---- | -------------------- |
1221| isEditing | boolean | 是   | 为true表示正在输入。 |
1222
1223### onEditChange<sup>8+</sup>
1224
1225onEditChange(callback: Callback\<boolean>)
1226
1227输入状态变化时,触发该回调。有光标时为编辑态,无光标时为非编辑态。
1228
1229**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
1230
1231**系统能力:** SystemCapability.ArkUI.ArkUI.Full
1232
1233**参数:**
1234
1235| 参数名    | 类型    | 必填 | 说明                 |
1236| --------- | ------- | ---- | -------------------- |
1237| callback | Callback\<boolean> | 是   | 输入状态变化回调,返回值为true表示正在输入。 |
1238
1239### onCopy<sup>8+</sup>
1240
1241onCopy(callback: Callback\<string>)
1242
1243进行复制操作时,触发该回调。
1244
1245**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
1246
1247**系统能力:** SystemCapability.ArkUI.ArkUI.Full
1248
1249**参数:**
1250
1251| 参数名    | 类型    | 必填 | 说明             |
1252| --------- | ------- | ---- | ---------------- |
1253| callback | Callback\<string> | 是   | 复制回调,其返回值为复制的文本内容。 |
1254
1255### onCut<sup>8+</sup>
1256
1257onCut(callback: Callback\<string>)
1258
1259进行剪切操作时,触发该回调。
1260
1261**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
1262
1263**系统能力:** SystemCapability.ArkUI.ArkUI.Full
1264
1265**参数:**
1266
1267| 参数名    | 类型    | 必填 | 说明             |
1268| --------- | ------- | ---- | ---------------- |
1269| callback | Callback\<string> | 是   | 剪切回调,其返回值为剪切的文本内容。 |
1270
1271### onPaste<sup>8+</sup>
1272
1273onPaste(callback: OnPasteCallback)
1274
1275进行粘贴操作时,触发该回调。
1276
1277**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
1278
1279**系统能力:** SystemCapability.ArkUI.ArkUI.Full
1280
1281**参数:**
1282| 参数名              | 类型                                                         | 必填 | 说明                   |
1283| ------------------- | ------------------------------------------------------------ | ---- | ---------------------- |
1284| callback | [OnPasteCallback](#onpastecallback18)       | 是   | 粘贴回调。 |
1285
1286### onTextSelectionChange<sup>10+</sup>
1287
1288onTextSelectionChange(callback: OnTextSelectionChangeCallback)
1289
1290文本选择的位置或编辑状态下光标位置发生变化时,触发该回调。
1291
1292**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
1293
1294**系统能力:** SystemCapability.ArkUI.ArkUI.Full
1295
1296**参数:**
1297
1298| 参数名         | 类型   | 必填 | 说明                                    |
1299| -------------- | ------ | ---- | --------------------------------------- |
1300| callback | [OnTextSelectionChangeCallback](#ontextselectionchangecallback18) | 是   | 文本选择变化回调或光标位置变化回调。 |
1301
1302### onContentScroll<sup>10+</sup>
1303
1304onContentScroll(callback: OnContentScrollCallback)
1305
1306文本内容滚动时,触发该回调。
1307
1308**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
1309
1310**系统能力:** SystemCapability.ArkUI.ArkUI.Full
1311
1312**参数:**
1313
1314| 参数名       | 类型   | 必填 | 说明                               |
1315| ------------ | ------ | ---- | ---------------------------------- |
1316| callback | [OnContentScrollCallback](#oncontentscrollcallback18) | 是   | 文本内容滚动回调。 |
1317
1318### onSecurityStateChange<sup>12+</sup>
1319
1320onSecurityStateChange(callback: Callback\<boolean>)
1321
1322密码显隐状态切换时,触发该回调。
1323
1324**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
1325
1326**系统能力:** SystemCapability.ArkUI.ArkUI.Full
1327
1328**参数:**
1329
1330| 参数名       | 类型   | 必填 | 说明                               |
1331| ------------ | ------ | ---- | ---------------------------------- |
1332| callback | Callback\<boolean> | 是   | 回调函数。|
1333
1334### onWillInsert<sup>12+</sup>
1335
1336onWillInsert(callback: Callback\<InsertValue, boolean>)
1337
1338在将要输入时,触发该回调。
1339
1340**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
1341
1342**系统能力:** SystemCapability.ArkUI.ArkUI.Full
1343
1344**参数:**
1345
1346| 参数名 | 类型                                                         | 必填 | 说明               |
1347| ------ | ------------------------------------------------------------ | ---- | ------------------ |
1348| callback  | Callback\<[InsertValue](ts-text-common.md#insertvalue12对象说明), boolean> | 是   | 在将要输入时调用的回调。<br/>在返回true时,表示正常插入,返回false时,表示不插入。<br/>在预上屏和候选词操作时,该回调不触发。<br/>仅支持系统输入法输入的场景。 |
1349
1350### onDidInsert<sup>12+</sup>
1351
1352onDidInsert(callback: Callback\<InsertValue>)
1353
1354在输入完成时,触发该回调。
1355
1356**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
1357
1358**系统能力:** SystemCapability.ArkUI.ArkUI.Full
1359
1360**参数:**
1361
1362| 参数名 | 类型                                                         | 必填 | 说明               |
1363| ------ | ------------------------------------------------------------ | ---- | ------------------ |
1364| callback  | Callback\<[InsertValue](ts-text-common.md#insertvalue12对象说明)> | 是   | 在输入完成时调用的回调。<br/>仅支持系统输入法输入的场景。 |
1365
1366### onWillDelete<sup>12+</sup>
1367
1368onWillDelete(callback: Callback\<DeleteValue, boolean>)
1369
1370在将要删除时,触发该回调。
1371
1372**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
1373
1374**系统能力:** SystemCapability.ArkUI.ArkUI.Full
1375
1376**参数:**
1377
1378| 参数名 | 类型                                                         | 必填 | 说明               |
1379| ------ | ------------------------------------------------------------ | ---- | ------------------ |
1380| callback  | Callback\<[DeleteValue](ts-text-common.md#deletevalue12对象说明), boolean> | 是   | 在将要删除时调用的回调。<br/>在返回true时,表示正常删除,返回false时,表示不删除。<br/>在预上屏删除操作时,该回调不触发。<br/>仅支持系统输入法输入的场景。 |
1381
1382### onDidDelete<sup>12+</sup>
1383
1384onDidDelete(callback: Callback\<DeleteValue>)
1385
1386在删除完成时,触发该回调。
1387
1388**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
1389
1390**系统能力:** SystemCapability.ArkUI.ArkUI.Full
1391
1392**参数:**
1393
1394| 参数名 | 类型                                                         | 必填 | 说明               |
1395| ------ | ------------------------------------------------------------ | ---- | ------------------ |
1396| callback  | Callback\<[DeleteValue](ts-text-common.md#deletevalue12对象说明)> | 是   | 在删除完成时调用的回调。<br/>仅支持系统输入法输入的场景。 |
1397
1398### onWillChange<sup>15+</sup>
1399
1400onWillChange(callback: Callback\<EditableTextChangeValue, boolean>)
1401
1402在文本内容将要发生变化时,触发该回调。
1403
1404onWillChange的回调时序晚于onWillInsert、onWillDelete,早于onDidInsert、onDidDelete。
1405
1406**原子化服务API:** 从API version 15开始,该接口支持在原子化服务中使用。
1407
1408**系统能力:** SystemCapability.ArkUI.ArkUI.Full
1409
1410**参数:**
1411
1412| 参数名 | 类型                                                         | 必填 | 说明               |
1413| ------ | ------------------------------------------------------------ | ---- | ------------------ |
1414| callback  | Callback\<[EditableTextChangeValue](ts-text-common.md#editabletextchangevalue15), boolean> | 是   | 在文本内容将要发生变化时的回调。<br/>返回true时,表示正常修改。返回false时,表示拦截此次触发。 |
1415
1416## TextInputController<sup>8+</sup>
1417
1418TextInput组件的控制器继承自[TextContentControllerBase](ts-types.md#textcontentcontrollerbase10)。
1419
1420**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
1421
1422**系统能力:** SystemCapability.ArkUI.ArkUI.Full
1423
1424### 导入对象
1425```
1426controller: TextInputController = new TextInputController()
1427```
1428
1429### constructor<sup>8+</sup>
1430
1431constructor()
1432
1433TextInputController的构造函数。
1434
1435**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
1436
1437**系统能力:** SystemCapability.ArkUI.ArkUI.Full
1438
1439### caretPosition<sup>8+</sup>
1440
1441caretPosition(value:&nbsp;number): void
1442
1443设置输入光标的位置。当取值小于0时,取0,大于文本长度时,显示在文本末尾。
1444
1445**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
1446
1447**系统能力:** SystemCapability.ArkUI.ArkUI.Full
1448
1449**参数:**
1450
1451| 参数名   | 类型   | 必填   | 说明  |
1452| ----- | ------ | ---- | ------ |
1453| value | number | 是    | 从字符串开始到光标所在位置的字符长度。 |
1454### setTextSelection<sup>10+</sup>
1455
1456setTextSelection(selectionStart:&nbsp;number, selectionEnd:&nbsp;number, options?:&nbsp;SelectionOptions): void
1457
1458设置文本选择区域并高亮显示。
1459
1460**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
1461
1462**系统能力:** SystemCapability.ArkUI.ArkUI.Full
1463
1464**参数:**
1465
1466| 参数名  | 类型   | 必填   | 说明  |
1467| ------- | ------ | ---- | ----- |
1468| selectionStart | number | 是    | 文本选择区域起始位置,文本框中文字的起始位置为0。 |
1469| selectionEnd   | number | 是    | 文本选择区域结束位置。 |
1470| options<sup>12+</sup>   | [SelectionOptions](ts-types.md#selectionoptions12对象说明) | 否    | 选中文字时的配置。<br />默认值:MenuPolicy.DEFAULT<br/>从API version 12开始,该接口中的options参数支持在原子化服务中使用。 |
1471
1472>  **说明:**
1473>
1474>  如果selectionStart或selectionEnd被赋值为undefined时,当作0处理。
1475>
1476>  如果selectionMenuHidden被赋值为true或设备为2in1时,即使options被赋值为MenuPolicy.SHOW,调用setTextSelection也不弹出菜单。
1477>
1478>  如果emoji表情被选中区域截断时,表情的起始位置包含在设置的文本选中区域内就会被选中。
1479
1480### stopEditing<sup>10+</sup>
1481
1482stopEditing(): void
1483
1484退出编辑态。
1485
1486**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
1487
1488**系统能力:** SystemCapability.ArkUI.ArkUI.Full
1489
1490## UnderlineColor<sup>12+</sup>对象说明
1491
1492**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
1493
1494**系统能力:** SystemCapability.ArkUI.ArkUI.Full
1495
1496| 名称 | 类型  | 必填   | 说明 |
1497| ---- | ----- | ---- | ---- |
1498| typing  | [ResourceColor](ts-types.md#resourcecolor) \| undefined | 否   | 键入时下划线颜色。不填写、undefined、null、无效值时恢复默认。 |
1499| normal  | [ResourceColor](ts-types.md#resourcecolor) \| undefined | 否   | 非特殊状态时下划线颜色。不填写、undefined、null、无效值时恢复默认。 |
1500| error   | [ResourceColor](ts-types.md#resourcecolor) \| undefined | 否   | 错误时下划线颜色。不填写、undefined、null、无效值时恢复默认。此选项会修改showCounter属性中达到最大字符数时的颜色。 |
1501| disable | [ResourceColor](ts-types.md#resourcecolor) \| undefined | 否   | 禁用时下划线颜色。不填写、undefined、null、无效值时恢复默认。 |
1502
1503## SubmitEvent<sup>11+</sup>
1504
1505定义用户提交事件。
1506
1507**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
1508
1509**系统能力:** SystemCapability.ArkUI.ArkUI.Full
1510
1511### 属性
1512
1513**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
1514
1515**系统能力:** SystemCapability.ArkUI.ArkUI.Full
1516
1517| 名称 | 类型  | 必填   | 说明 |
1518| ---- | ----- | ---- | ---- |
1519| text              | string     | 是   | 输入框文本内容。                                   |
1520
1521### keepEditableState
1522
1523keepEditableState(): void
1524
1525用户自定义输入框编辑状态,调用时保持编辑态。
1526
1527**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
1528
1529**系统能力:** SystemCapability.ArkUI.ArkUI.Full
1530
1531## OnPasteCallback<sup>18+</sup>
1532
1533type OnPasteCallback = (content: string, event: PasteEvent) => void
1534
1535粘贴回调。
1536
1537**原子化服务API:** 从API version 18开始,该接口支持在原子化服务中使用。
1538
1539**系统能力:** SystemCapability.ArkUI.ArkUI.Full
1540
1541**参数:**
1542
1543| 参数名              | 类型                                                         | 必填 | 说明                   |
1544| ------------------- | ------------------------------------------------------------ | ---- | ---------------------- |
1545| content               | string                                                       | 是   | 粘贴的文本内容。       |
1546| event | [PasteEvent](ts-basic-components-richeditor.md#pasteevent11) | 是   | 用户自定义的粘贴事件。 |
1547
1548## OnSubmitCallback<sup>18+</sup>
1549
1550type OnSubmitCallback = (enterKey: EnterKeyType, event: SubmitEvent) => void
1551
1552提交回调。
1553
1554**原子化服务API:** 从API version 18开始,该接口支持在原子化服务中使用。
1555
1556**系统能力:** SystemCapability.ArkUI.ArkUI.Full
1557
1558**参数:**
1559
1560| 参数名              | 类型                                             | 必填 | 说明                                                         |
1561| ------------------- | ------------------------------------------------ | ---- | ------------------------------------------------------------ |
1562| enterKey            | [EnterKeyType](#enterkeytype枚举说明) | 是   | 输入法回车键类型。 |
1563| event | [SubmitEvent](#submitevent11)         | 是   | 提交事件。                                                   |
1564
1565## OnTextSelectionChangeCallback<sup>18+</sup>
1566
1567type OnTextSelectionChangeCallback = (selectionStart: number, selectionEnd: number) => void
1568
1569文本选择变化回调或光标位置变化回调。
1570
1571**原子化服务API:** 从API version 18开始,该接口支持在原子化服务中使用。
1572
1573**系统能力:** SystemCapability.ArkUI.ArkUI.Full
1574
1575**参数:**
1576
1577| 参数名         | 类型   | 必填 | 说明                                    |
1578| -------------- | ------ | ---- | --------------------------------------- |
1579| selectionStart | number | 是   | 所选文本的起始位置,文字的起始位置为0。 |
1580| selectionEnd   | number | 是   | 所选文本的结束位置。                    |
1581
1582## OnContentScrollCallback<sup>18+</sup>
1583
1584type OnContentScrollCallback = (totalOffsetX: number, totalOffsetY: number) => void
1585
1586文本内容滚动回调。
1587
1588**原子化服务API:** 从API version 18开始,该接口支持在原子化服务中使用。
1589
1590**系统能力:** SystemCapability.ArkUI.ArkUI.Full
1591
1592**参数:**
1593
1594| 参数名       | 类型   | 必填 | 说明                               |
1595| ------------ | ------ | ---- | ---------------------------------- |
1596| totalOffsetX | number | 是   | 文本在内容区的横坐标偏移,单位px。 |
1597| totalOffsetY | number | 是   | 文本在内容区的纵坐标偏移,单位px。 |
1598
1599## 示例
1600
1601### 示例1(设置与获取光标位置)
1602
1603该示例通过controller实现了光标位置的设置与获取的功能。
1604
1605```ts
1606// xxx.ets
1607@Entry
1608@Component
1609struct TextInputExample {
1610  @State text: string = ''
1611  @State positionInfo: CaretOffset = { index: 0, x: 0, y: 0 }
1612  @State passwordState: boolean = false
1613  controller: TextInputController = new TextInputController()
1614
1615  build() {
1616    Column() {
1617      // 使用!!实现text参数的双向数据绑定
1618      TextInput({ text: this.text!!, placeholder: 'input your word...', controller: this.controller })
1619        .placeholderColor(Color.Grey)
1620        .placeholderFont({ size: 14, weight: 400 })
1621        .caretColor(Color.Blue)
1622        .width('95%')
1623        .height(40)
1624        .margin(20)
1625        .fontSize(14)
1626        .fontColor(Color.Black)
1627        .inputFilter('[a-z]', (e) => {
1628          console.log(JSON.stringify(e))
1629        })
1630      Text(this.text)
1631      Button('Set caretPosition 1')
1632        .margin(15)
1633        .onClick(() => {
1634          // 将光标移动至第一个字符后
1635          this.controller.caretPosition(1)
1636        })
1637      Button('Get CaretOffset')
1638        .margin(15)
1639        .onClick(() => {
1640          this.positionInfo = this.controller.getCaretOffset()
1641        })
1642      // 密码输入框
1643      TextInput({ placeholder: 'input your password...' })
1644        .width('95%')
1645        .height(40)
1646        .margin(20)
1647        .type(InputType.Password)
1648        .maxLength(9)
1649        .showPasswordIcon(true)
1650        .showPassword(this.passwordState)
1651        .onSecurityStateChange(((isShowPassword: boolean) => {
1652          // 更新密码显示状态
1653          console.info('isShowPassword', isShowPassword)
1654          this.passwordState = isShowPassword
1655        }))
1656      // 邮箱地址自动填充类型
1657      TextInput({ placeholder: 'input your email...' })
1658        .width('95%')
1659        .height(40)
1660        .margin(20)
1661        .contentType(ContentType.EMAIL_ADDRESS)
1662        .maxLength(9)
1663      // 内联风格输入框
1664      TextInput({ text: 'inline style' })
1665        .width('95%')
1666        .height(50)
1667        .margin(20)
1668        .borderRadius(0)
1669        .style(TextInputStyle.Inline)
1670    }.width('100%')
1671  }
1672}
1673```
1674
1675![TextInput](figures/TextInput.gif)
1676
1677### 示例2(设置下划线)
1678
1679该示例通过showUnderline、showError、showUnit、passwordIcon属性展示了下划线在不同场景的效果。
1680
1681```ts
1682// xxx.ets
1683@Entry
1684@Component
1685struct TextInputExample {
1686  @State passWordSrc1: Resource = $r('app.media.ImageOne');
1687  @State passWordSrc2: Resource = $r('app.media.ImageTwo');
1688  @State textError: string = '';
1689  @State text: string = '';
1690  @State nameText: string = 'test';
1691
1692  @Builder
1693  itemEnd() {
1694    Select([{ value: 'KB' },
1695      { value: 'MB' },
1696      { value: 'GB' },
1697      { value: 'TB', }])
1698      .height("48vp")
1699      .borderRadius(0)
1700      .selected(2)
1701      .align(Alignment.Center)
1702      .value('MB')
1703      .font({ size: 20, weight: 500 })
1704      .fontColor('#182431')
1705      .selectedOptionFont({ size: 20, weight: 400 })
1706      .optionFont({ size: 20, weight: 400 })
1707      .backgroundColor(Color.Transparent)
1708      .responseRegion({
1709        height: "40vp",
1710        width: "80%",
1711        x: '10%',
1712        y: '6vp'
1713      })
1714      .onSelect((index: number) => {
1715        console.info('Select:' + index);
1716      })
1717  }
1718
1719  build() {
1720    Column({ space: 20 }) {
1721      // 自定义密码显示图标
1722      TextInput({ placeholder: 'user define password icon' })
1723        .type(InputType.Password)
1724        .width(350)
1725        .height(60)
1726        .passwordIcon({ onIconSrc: this.passWordSrc1, offIconSrc: this.passWordSrc2 })
1727      // 下划线模式
1728      TextInput({ placeholder: 'underline style' })
1729        .showUnderline(true)
1730        .width(350)
1731        .height(60)
1732        .showError('Error')
1733        .showUnit(this.itemEnd)
1734
1735      Text(`用户名:${this.text}`)
1736        .width(350)
1737      TextInput({ placeholder: '请输入用户名', text: this.text })
1738        .showUnderline(true)
1739        .width(350)
1740        .showError(this.textError)
1741        .onChange((value: string) => {
1742          this.text = value
1743        })
1744        .onSubmit((enterKey: EnterKeyType, event: SubmitEvent) => {
1745          // 用户名不正确会清空输入框和用户名并提示错误文本
1746          if (this.text == this.nameText) {
1747            this.textError = '';
1748          } else {
1749            this.textError = '用户名输入错误';
1750            this.text = '';
1751            // 调用keepEditableState方法,输入框保持编辑态
1752            event.keepEditableState();
1753          }
1754        })
1755      // 设置下划线颜色
1756      TextInput({ placeholder: '提示文本内容' })
1757        .width(350)
1758        .showUnderline(true)
1759        .underlineColor({
1760          normal: Color.Orange,
1761          typing: Color.Green,
1762          error: Color.Red,
1763          disable: Color.Gray
1764        });
1765      TextInput({ placeholder: '提示文本内容' })
1766        .width(350)
1767        .showUnderline(true)
1768        .underlineColor(Color.Gray);
1769
1770    }.width('100%').margin({ top: 10 })
1771  }
1772}
1773```
1774
1775![TextInputError](figures/TextInputUnderline.png)
1776
1777### 示例3(设置自定义键盘)
1778
1779该示例通过customKeyboard属性实现了自定义键盘的功能。
1780
1781```ts
1782// xxx.ets
1783@Entry
1784@Component
1785struct TextInputExample {
1786  controller: TextInputController = new TextInputController();
1787  @State inputValue: string = "";
1788
1789  // 自定义键盘组件
1790  @Builder
1791  CustomKeyboardBuilder() {
1792    Column() {
1793      Button('x').onClick(() => {
1794        // 关闭自定义键盘
1795        this.controller.stopEditing();
1796      })
1797      Grid() {
1798        ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'], (item: number | string) => {
1799          GridItem() {
1800            Button(item + "")
1801              .width(110).onClick(() => {
1802              this.inputValue += item;
1803            })
1804          }
1805        })
1806      }.maxCount(3).columnsGap(10).rowsGap(10).padding(5)
1807    }.backgroundColor(Color.Gray)
1808  }
1809
1810  build() {
1811    Column() {
1812      TextInput({ controller: this.controller, text: this.inputValue })// 绑定自定义键盘
1813        .customKeyboard(this.CustomKeyboardBuilder()).margin(10).border({ width: 1 }).height('48vp')
1814    }
1815  }
1816}
1817```
1818
1819![customKeyboard](figures/textInputCustomKeyboard.png)
1820
1821### 示例4(设置右侧清除按钮样式)
1822
1823该示例通过cancelButton属性展示了自定义右侧清除按钮样式的效果。
1824
1825```ts
1826// xxx.ets
1827@Entry
1828@Component
1829struct TextInputExample {
1830  @State text: string = '';
1831  controller: TextInputController = new TextInputController();
1832
1833  build() {
1834    Column() {
1835      TextInput({ placeholder: 'input ...', controller: this.controller })
1836        .width(380)
1837        .height(60)
1838        .cancelButton({
1839          style: CancelButtonStyle.CONSTANT,
1840          icon: {
1841            size: 45,
1842            src: $r('app.media.app_icon'),
1843            color: Color.Blue
1844          }
1845        })
1846        .onChange((value: string) => {
1847          this.text = value;
1848        })
1849    }
1850  }
1851}
1852```
1853
1854![cancelButton](figures/TextInputCancelButton.png)
1855
1856### 示例5(设置计数器)
1857
1858该示例通过maxLength、showCounter、showUnderline属性实现了计数器的功能。
1859
1860```ts
1861// xxx.ets
1862@Entry
1863@Component
1864struct TextInputExample {
1865  @State text: string = '';
1866  controller: TextInputController = new TextInputController();
1867
1868  build() {
1869    Column() {
1870      TextInput({ text: this.text, controller: this.controller })
1871        .placeholderFont({ size: 16, weight: 400 })
1872        .width(336)
1873        .height(56)
1874        .maxLength(6)
1875        .showUnderline(true)
1876        .showCounter(true,
1877          { thresholdPercentage: 50, highlightBorder: true })//计数器显示效果为用户当前输入字符数/最大字符限制数。最大字符限制数通过maxLength()接口设置。
1878          //如果用户当前输入字符数达到最大字符限制乘50%(thresholdPercentage)。字符计数器显示。
1879          //用户设置highlightBorder为false时,配置取消红色边框。不设置此参数时,默认为true。
1880        .onChange((value: string) => {
1881          this.text = value;
1882        })
1883    }.width('100%').height('100%').backgroundColor('#F1F3F5')
1884  }
1885}
1886```
1887
1888![TextInputCounter](figures/TextInputShowCounter.jpg)
1889
1890
1891### 示例6(电话号码格式化)
1892
1893该示例通过onChange回调实现了电话号码格式化为XXX XXXX XXXX的功能。
1894
1895```ts
1896// xxx.ets
1897@Entry
1898@Component
1899struct TextInputExample {
1900  @State submitValue: string = '';
1901  @State text: string = '';
1902  public readonly NUM_TEXT_MAXSIZE_LENGTH = 13;
1903  @State teleNumberNoSpace: string = "";
1904  @State nextCaret: number = -1; // 用于记录下次光标设置的位置
1905  @State actualCh: number = -1; // 用于记录光标在第i个数字后插入或者第i个数字前删除
1906  @State lastCaretPosition: number = 0;
1907  @State lastCaretPositionEnd: number = 0;
1908  controller: TextInputController = new TextInputController();
1909
1910  isEmpty(str?: string): boolean {
1911    return str == 'undefined' || !str || !new RegExp("[^\\s]").test(str);
1912  }
1913
1914  checkNeedNumberSpace(numText: string) {
1915    let isSpace: RegExp = new RegExp('[\\+;,#\\*]', 'g');
1916    let isRule: RegExp = new RegExp('^\\+.*');
1917
1918    if (isSpace.test(numText)) {
1919      // 如果电话号码里有特殊字符,就不加空格
1920      if (isRule.test(numText)) {
1921        return true;
1922      } else {
1923        return false;
1924      }
1925    }
1926    return true;
1927  }
1928
1929  removeSpace(str: string): string {
1930    if (this.isEmpty(str)) {
1931      return '';
1932    }
1933    return str.replace(new RegExp("[\\s]", "g"), '');
1934  }
1935
1936  setCaret() {
1937    if (this.nextCaret != -1) {
1938      console.log("to keep caret position right, change caret to", this.nextCaret);
1939      this.controller.caretPosition(this.nextCaret);
1940      this.nextCaret = -1;
1941    }
1942  }
1943
1944  calcCaretPosition(nextText: string) {
1945    let befNumberNoSpace: string = this.removeSpace(this.text);
1946    this.actualCh = 0;
1947    if (befNumberNoSpace.length < this.teleNumberNoSpace.length) { // 插入场景
1948      for (let i = 0; i < this.lastCaretPosition; i++) {
1949        if (this.text[i] != ' ') {
1950          this.actualCh += 1;
1951        }
1952      }
1953      this.actualCh += this.teleNumberNoSpace.length - befNumberNoSpace.length;
1954      console.log("actualCh: " + this.actualCh);
1955      for (let i = 0; i < nextText.length; i++) {
1956        if (nextText[i] != ' ') {
1957          this.actualCh -= 1;
1958          if (this.actualCh <= 0) {
1959            this.nextCaret = i + 1;
1960            break;
1961          }
1962        }
1963      }
1964    } else if (befNumberNoSpace.length > this.teleNumberNoSpace.length) { // 删除场景
1965      if (this.lastCaretPosition === this.text.length) {
1966        console.log("Caret at last, no need to change");
1967      } else if (this.lastCaretPosition === this.lastCaretPositionEnd) {
1968        // 按键盘上回退键一个一个删的情况
1969        for (let i = this.lastCaretPosition; i < this.text.length; i++) {
1970          if (this.text[i] != ' ') {
1971            this.actualCh += 1;
1972          }
1973        }
1974        for (let i = nextText.length - 1; i >= 0; i--) {
1975          if (nextText[i] != ' ') {
1976            this.actualCh -= 1;
1977            if (this.actualCh <= 0) {
1978              this.nextCaret = i;
1979              break;
1980            }
1981          }
1982        }
1983      } else {
1984        // 剪切/手柄选择 一次删多个字符
1985        this.nextCaret = this.lastCaretPosition; // 保持光标位置
1986      }
1987    }
1988  }
1989
1990  build() {
1991    Column() {
1992      Row() {
1993        TextInput({ text: `${this.text}`, controller: this.controller }).type(InputType.PhoneNumber).height('48vp')
1994          .onChange((number: string) => {
1995            this.teleNumberNoSpace = this.removeSpace(number);
1996            let nextText: string = "";
1997            if (this.teleNumberNoSpace.length > this.NUM_TEXT_MAXSIZE_LENGTH - 2) {
1998              nextText = this.teleNumberNoSpace;
1999            } else if (this.checkNeedNumberSpace(number)) {
2000              if (this.teleNumberNoSpace.length <= 3) {
2001                nextText = this.teleNumberNoSpace;
2002              } else {
2003                let split1: string = this.teleNumberNoSpace.substring(0, 3);
2004                let split2: string = this.teleNumberNoSpace.substring(3);
2005                nextText = split1 + ' ' + split2;
2006                if (this.teleNumberNoSpace.length > 7) {
2007                  split2 = this.teleNumberNoSpace.substring(3, 7);
2008                  let split3: string = this.teleNumberNoSpace.substring(7);
2009                  nextText = split1 + ' ' + split2 + ' ' + split3;
2010                }
2011              }
2012            } else {
2013              nextText = number;
2014            }
2015            console.log("onChange Triggered:" + this.text + "|" + nextText + "|" + number);
2016            if (this.text === nextText && nextText === number) {
2017              // 此时说明数字已经格式化完成了 在这个时候改变光标位置不会被重置掉
2018              this.setCaret();
2019            } else {
2020              this.calcCaretPosition(nextText);
2021            }
2022            this.text = nextText;
2023          })
2024          .onTextSelectionChange((selectionStart, selectionEnd) => {
2025            // 记录光标位置
2026            console.log("selection change: ", selectionStart, selectionEnd);
2027            this.lastCaretPosition = selectionStart;
2028            this.lastCaretPositionEnd = selectionEnd;
2029          })
2030      }
2031    }
2032    .width('100%')
2033    .height("100%")
2034  }
2035}
2036```
2037![phone_example](figures/phone_number.PNG)
2038
2039### 示例7(设置文本断行规则)
2040
2041该示例通过wordBreak属性实现了TextInput不同断行规则下的效果。
2042
2043```ts
2044// xxx.ets
2045@Entry
2046@Component
2047struct TextInputExample {
2048  @State textStrEn: string =
2049    'This is set wordBreak to WordBreak text Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu.';
2050  @State textStrZn: string =
2051    '多行文本输入框组件,当输入的文本内容超过组件宽度时会自动换行显示。\n高度未设置时,组件无默认高度,自适应内容高度。宽度未设置时,默认撑满最大宽度。';
2052
2053  build() {
2054    Row() {
2055      Column() {
2056        Text("TextInput为inline模式,WordBreakType属性为NORMAL的样式:").fontSize(16).fontColor(0xCCCCCC)
2057        TextInput({
2058          text: this.textStrEn
2059        })
2060          .margin(10)
2061          .fontSize(16)
2062          .style(TextInputStyle.Inline)// Inline模式
2063          .wordBreak(WordBreak.NORMAL) // 非Inline模式该属性无效
2064
2065        Text("TextInput为inline模式,英文文本,WordBreakType属性为BREAK_ALL的样式:").fontSize(16).fontColor(0xCCCCCC)
2066        TextInput({
2067          text: this.textStrEn
2068        })
2069          .margin(10)
2070          .fontSize(16)
2071          .style(TextInputStyle.Inline)
2072          .wordBreak(WordBreak.BREAK_ALL)
2073
2074        Text("TextInput为inline模式,中文文本,WordBreakType属性为BREAK_ALL的样式:").fontSize(16).fontColor(0xCCCCCC)
2075        TextInput({
2076          text: this.textStrZn
2077        })
2078          .margin(10)
2079          .fontSize(16)
2080          .style(TextInputStyle.Inline)
2081          .wordBreak(WordBreak.BREAK_ALL)
2082
2083        Text("TextInput为inline模式,WordBreakType属性为BREAK_WORD的样式:").fontSize(16).fontColor(0xCCCCCC)
2084        TextInput({
2085          text: this.textStrEn
2086        })
2087          .margin(10)
2088          .fontSize(16)
2089          .style(TextInputStyle.Inline)
2090          .wordBreak(WordBreak.BREAK_WORD)
2091      }.width('100%')
2092    }.height('100%').margin(10)
2093  }
2094}
2095```
2096![TextInputWordBreak](figures/TextInputWordBreak.png)
2097
2098### 示例8(设置文本样式)
2099
2100该示例通过lineHeight、letterSpacing、decoration属性展示了不同样式的文本效果。
2101
2102```ts
2103// xxx.ets
2104@Entry
2105@Component
2106struct TextInputExample {
2107  build() {
2108    Row() {
2109      Column() {
2110        Text('lineHeight').fontSize(9).fontColor(0xCCCCCC)
2111        TextInput({ text: 'lineHeight unset' })
2112          .border({ width: 1 }).padding(10).margin(5)
2113        TextInput({ text: 'lineHeight 15' })
2114          .border({ width: 1 }).padding(10).margin(5).lineHeight(15)
2115        TextInput({ text: 'lineHeight 30' })
2116          .border({ width: 1 }).padding(10).margin(5).lineHeight(30)
2117
2118        Text('letterSpacing').fontSize(9).fontColor(0xCCCCCC)
2119        TextInput({ text: 'letterSpacing 0' })
2120          .border({ width: 1 }).padding(5).margin(5).letterSpacing(0)
2121        TextInput({ text: 'letterSpacing 3' })
2122          .border({ width: 1 }).padding(5).margin(5).letterSpacing(3)
2123        TextInput({ text: 'letterSpacing -1' })
2124          .border({ width: 1 }).padding(5).margin(5).letterSpacing(-1)
2125
2126        Text('decoration').fontSize(9).fontColor(0xCCCCCC)
2127        TextInput({ text: 'LineThrough, Red' })
2128          .border({ width: 1 }).padding(5).margin(5)
2129          .decoration({ type: TextDecorationType.LineThrough, color: Color.Red })
2130        TextInput({ text: 'Overline, Red, DASHED' })
2131          .border({ width: 1 }).padding(5).margin(5)
2132          .decoration({ type: TextDecorationType.Overline, color: Color.Red, style: TextDecorationStyle.DASHED })
2133        TextInput({ text: 'Underline, Red, WAVY' })
2134          .border({ width: 1 }).padding(5).margin(5)
2135          .decoration({ type: TextDecorationType.Underline, color: Color.Red, style: TextDecorationStyle.WAVY })
2136      }.height('90%')
2137    }
2138    .width('90%')
2139    .margin(10)
2140  }
2141}
2142```
2143
2144![TextInputDecoration](figures/textinput_decoration.png)
2145
2146### 示例9(设置文字特性效果)
2147
2148该示例通过fontFeature属性实现了文本在不同文字特性下的展示效果。
2149
2150```ts
2151// xxx.ets
2152@Entry
2153@Component
2154struct TextInputExample {
2155  @State text1: string = 'This is ss01 on : 0123456789';
2156  @State text2: string = 'This is ss01 off: 0123456789';
2157
2158  build() {
2159    Column() {
2160      TextInput({ text: this.text1 })
2161        .fontSize(20)
2162        .margin({ top: 200 })
2163        .fontFeature("\"ss01\" on")
2164      TextInput({ text: this.text2 })
2165        .margin({ top: 10 })
2166        .fontSize(20)
2167        .fontFeature("\"ss01\" off")
2168    }
2169    .width("90%")
2170    .margin("5%")
2171  }
2172}
2173```
2174
2175![fontFeature](figures/textInputFontFeature.png)
2176
2177### 示例10(自定义键盘避让)
2178
2179该示例通过自定义键盘实现了键盘避让的效果。
2180
2181```ts
2182// xxx.ets
2183@Entry
2184@Component
2185struct TextInputExample {
2186  controller: TextInputController = new TextInputController();
2187  @State inputValue: string = "";
2188  @State height1: string | number = '80%';
2189  @State supportAvoidance: boolean = true;
2190
2191  // 自定义键盘组件
2192  @Builder
2193  CustomKeyboardBuilder() {
2194    Column() {
2195      Row() {
2196        Button('x').onClick(() => {
2197          // 关闭自定义键盘
2198          this.controller.stopEditing();
2199        }).margin(10)
2200      }
2201
2202      Grid() {
2203        ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'], (item: number | string) => {
2204          GridItem() {
2205            Button(item + "")
2206              .width(110).onClick(() => {
2207              this.inputValue += item;
2208            })
2209          }
2210        })
2211      }.maxCount(3).columnsGap(10).rowsGap(10).padding(5)
2212    }.backgroundColor(Color.Gray)
2213  }
2214
2215  build() {
2216    Column() {
2217      Row() {
2218        Button("20%")
2219          .fontSize(24)
2220          .onClick(() => {
2221            this.height1 = "20%";
2222          })
2223        Button("80%")
2224          .fontSize(24)
2225          .margin({ left: 20 })
2226          .onClick(() => {
2227            this.height1 = "80%";
2228          })
2229      }
2230      .justifyContent(FlexAlign.Center)
2231      .alignItems(VerticalAlign.Bottom)
2232      .height(this.height1)
2233      .width("100%")
2234      .padding({ bottom: 50 })
2235
2236      TextInput({ controller: this.controller, text: this.inputValue })// 绑定自定义键盘
2237        .customKeyboard(this.CustomKeyboardBuilder(), { supportAvoidance: this.supportAvoidance })
2238        .margin(10)
2239        .border({ width: 1 })
2240
2241    }
2242  }
2243}
2244```
2245
2246![CustomTextInputType](figures/textInputCustomKeyboard.gif)
2247
2248### 示例11(设置文本自适应)
2249
2250该示例通过minFontSize、maxFontSize、heightAdaptivePolicy属性实现了文本自适应字号的功能。
2251
2252```ts
2253// xxx.ets
2254@Entry
2255@Component
2256struct TextInputExample {
2257  build() {
2258    Row() {
2259      Column() {
2260        Text('heightAdaptivePolicy').fontSize(9).fontColor(0xCCCCCC)
2261        TextInput({ text: 'This is the text without the height adaptive policy set' })
2262          .width('80%').height(50).borderWidth(1).margin(1)
2263        TextInput({ text: 'This is the text with the height adaptive policy set' })
2264          .width('80%')
2265          .height(50)
2266          .borderWidth(1)
2267          .margin(1)
2268          .minFontSize(4)
2269          .maxFontSize(40)
2270          .maxLines(3)
2271          .heightAdaptivePolicy(TextHeightAdaptivePolicy.MAX_LINES_FIRST)
2272        TextInput({ text: 'This is the text with the height adaptive policy set' })
2273          .width('80%')
2274          .height(50)
2275          .borderWidth(1)
2276          .margin(1)
2277          .minFontSize(4)
2278          .maxFontSize(40)
2279          .maxLines(3)
2280          .heightAdaptivePolicy(TextHeightAdaptivePolicy.MIN_FONT_SIZE_FIRST)
2281        TextInput({ text: 'This is the text with the height adaptive policy set' })
2282          .width('80%')
2283          .height(50)
2284          .borderWidth(1)
2285          .margin(1)
2286          .minFontSize(4)
2287          .maxFontSize(40)
2288          .maxLines(3)
2289          .heightAdaptivePolicy(TextHeightAdaptivePolicy.LAYOUT_CONSTRAINT_FIRST)
2290      }.height('90%')
2291    }
2292    .width('90%')
2293    .margin(10)
2294  }
2295}
2296```
2297
2298![TextInputAdaptFont](figures/textinput_adapt_font.png)
2299
2300### 示例12(设置折行规则)
2301
2302该示例通过lineBreakStrategy属性实现了TextInput不同折行规则下的效果。
2303
2304```ts
2305// xxx.ets
2306@Entry
2307@Component
2308struct TextInputExample {
2309  @State message1: string =
2310    "They can be classified as built-in components–those directly provided by the ArkUI framework and custom components – those defined by developers" +
2311      "The built-in components include buttons radio buttonsprogress indicators and text You can set the rendering effectof thesecomponents in method chaining mode," +
2312      "page components are divided into independent UI units to implementindependent creation development and reuse of different units on pages making pages more engineering-oriented.";
2313  @State lineBreakStrategyIndex: number = 0;
2314  @State lineBreakStrategy: LineBreakStrategy[] =
2315    [LineBreakStrategy.GREEDY, LineBreakStrategy.HIGH_QUALITY, LineBreakStrategy.BALANCED];
2316  @State lineBreakStrategyStr: string[] = ['GREEDY', 'HIGH_QUALITY', 'BALANCED'];
2317
2318  build() {
2319    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start }) {
2320      Text('lineBreakStrategy').fontSize(9).fontColor(0xCCCCCC)
2321      TextInput({ text: this.message1 })
2322        .fontSize(12)
2323        .border({ width: 1 })
2324        .padding(10)
2325        .width('100%')
2326        .maxLines(12)
2327        .style(TextInputStyle.Inline)
2328        .lineBreakStrategy(this.lineBreakStrategy[this.lineBreakStrategyIndex])
2329      Row() {
2330        Button('当前lineBreakStrategy模式:' + this.lineBreakStrategyStr[this.lineBreakStrategyIndex]).onClick(() => {
2331          this.lineBreakStrategyIndex++;
2332          if (this.lineBreakStrategyIndex > (this.lineBreakStrategyStr.length - 1)) {
2333            this.lineBreakStrategyIndex = 0;
2334          }
2335        })
2336      }
2337    }.height(700).width(370).padding({ left: 35, right: 35, top: 35 })
2338  }
2339}
2340```
2341
2342![textInputLineBreakStrategy](figures/textInputLineBreakStrategy.gif)
2343
2344### 示例13(支持插入和删除回调)
2345该示例通过onWillInsert、onDidInsert、onWillDelete、onDidDelete接口实现了插入和删除的效果。
2346```ts
2347// xxx.ets
2348@Entry
2349@Component
2350struct TextInputExample {
2351  @State insertValue: string = "";
2352  @State deleteValue: string = "";
2353  @State insertOffset: number = 0;
2354  @State deleteOffset: number = 0;
2355  @State deleteDirection: number = 0;
2356
2357  build() {
2358    Row() {
2359      Column() {
2360        TextInput({ text: "TextInput支持插入回调文本" })
2361          .height(60)
2362          .onWillInsert((info: InsertValue) => {
2363            this.insertValue = info.insertValue;
2364            return true;
2365          })
2366          .onDidInsert((info: InsertValue) => {
2367            this.insertOffset = info.insertOffset;
2368          })
2369
2370        Text("insertValue:" + this.insertValue + "  insertOffset:" + this.insertOffset).height(30)
2371
2372        TextInput({ text: "TextInput支持删除回调文本b" })
2373          .height(60)
2374          .onWillDelete((info: DeleteValue) => {
2375            this.deleteValue = info.deleteValue;
2376            info.direction;
2377            return true;
2378          })
2379          .onDidDelete((info: DeleteValue) => {
2380            this.deleteOffset = info.deleteOffset;
2381            this.deleteDirection = info.direction;
2382          })
2383
2384        Text("deleteValue:" + this.deleteValue + "  deleteOffset:" + this.deleteOffset).height(30)
2385        Text("deleteDirection:" + (this.deleteDirection == 0 ? "BACKWARD" : "FORWARD")).height(30)
2386
2387      }.width('100%')
2388    }
2389    .height('100%')
2390  }
2391}
2392```
2393
2394![TextInputInsertAndDelete](figures/TextInputInsertAndDelete.PNG)
2395
2396### 示例14(文本扩展自定义菜单)
2397
2398该示例通过editMenuOptions接口实现了文本设置自定义菜单扩展项的文本内容、图标以及回调的功能。
2399
2400```ts
2401// xxx.ets
2402@Entry
2403@Component
2404struct TextInputExample {
2405  @State text: string = 'TextInput editMenuOptions'
2406  onCreateMenu = (menuItems: Array<TextMenuItem>) => {
2407    let item1: TextMenuItem = {
2408      content: 'custom1',
2409      icon: $r('app.media.startIcon'),
2410      id: TextMenuItemId.of('custom1'),
2411    };
2412    let item2: TextMenuItem = {
2413      content: 'custom2',
2414      id: TextMenuItemId.of('custom2'),
2415      icon: $r('app.media.startIcon'),
2416    };
2417    menuItems.push(item1);
2418    menuItems.unshift(item2);
2419    return menuItems;
2420  }
2421  onMenuItemClick = (menuItem: TextMenuItem, textRange: TextRange) => {
2422    if (menuItem.id.equals(TextMenuItemId.of("custom2"))) {
2423      console.log("拦截 id: custom2 start:" + textRange.start + "; end:" + textRange.end);
2424      return true;
2425    }
2426    if (menuItem.id.equals(TextMenuItemId.COPY)) {
2427      console.log("拦截 COPY start:" + textRange.start + "; end:" + textRange.end);
2428      return true;
2429    }
2430    if (menuItem.id.equals(TextMenuItemId.SELECT_ALL)) {
2431      console.log("不拦截 SELECT_ALL start:" + textRange.start + "; end:" + textRange.end);
2432      return false;
2433    }
2434    return false;
2435  }
2436  @State editMenuOptions: EditMenuOptions = {
2437    onCreateMenu: this.onCreateMenu, onMenuItemClick: this.onMenuItemClick
2438  }
2439
2440  build() {
2441    Column() {
2442      TextInput({ text: this.text })
2443        .width('95%')
2444        .height(50)
2445        .editMenuOptions(this.editMenuOptions)
2446        .margin({ top: 100 })
2447    }
2448    .width("90%")
2449    .margin("5%")
2450  }
2451}
2452```
2453
2454![textInputEditMenuOptions](figures/textInputEditMenuOptions.gif)
2455
2456### 示例15(设置symbol类型清除按钮)
2457
2458该示例通过cancelButton属性展示了自定义右侧symbol类型清除按钮样式的效果。
2459
2460```ts
2461import { SymbolGlyphModifier } from '@kit.ArkUI';
2462
2463// xxx.ets
2464@Entry
2465@Component
2466struct TextInputExample {
2467  @State text: string = '';
2468  symbolModifier: SymbolGlyphModifier =
2469    new SymbolGlyphModifier($r('sys.symbol.trash')).fontColor([Color.Red]).fontSize(16).fontWeight(FontWeight.Regular);
2470
2471  build() {
2472    Column() {
2473      TextInput({ text: this.text, placeholder: 'input your word...' })
2474        .cancelButton({
2475          style: CancelButtonStyle.CONSTANT,
2476          icon: this.symbolModifier
2477        })
2478    }
2479  }
2480}
2481```
2482
2483![cancelButton](figures/TextInputCancelButton_SymbolGlyphModifier.jpg)
2484
2485### 示例16(文本设置省略模式)
2486
2487该示例通过textOverflow、ellipsisMode、style属性展示了文本超长省略以及调整省略位置的效果。
2488
2489```ts
2490// xxx.ets
2491@Entry
2492@Component
2493struct EllipsisModeExample {
2494  @State text: string = "As the sun begins to set, casting a warm golden hue across the sky," +
2495    "the world seems to slow down and breathe a sigh of relief. The sky is painted with hues of orange, " +
2496    " pink, and lavender, creating a breath taking tapestry that stretches as far as the eye can see." +
2497    "The air is filled with the sweet scent of blooming flowers, mingling with the earthy aroma of freshly turned soil."
2498  @State ellipsisModeIndex: number = 0
2499  @State ellipsisMode: (EllipsisMode | undefined | null)[] = [EllipsisMode.END, EllipsisMode.START, EllipsisMode.CENTER]
2500  @State ellipsisModeStr: string[] = ['END ', 'START', 'CENTER']
2501  @State textOverflowIndex: number = 0
2502  @State textOverflow: TextOverflow[] = [TextOverflow.Ellipsis, TextOverflow.Clip]
2503  @State textOverflowStr: string[] = ['Ellipsis', 'Clip']
2504  @State styleInputIndex: number = 0
2505  @State styleInput: TextInputStyle[] = [TextInputStyle.Inline, TextInputStyle.Default]
2506  @State styleInputStr: string[] = ['Inline', 'Default']
2507  build() {
2508    Row() {
2509      Column({ space: 20 }) {
2510        Text('测试TextInput').fontSize(30)
2511        TextInput({ text: this.text})
2512          .textOverflow( this.textOverflow[this.textOverflowIndex])
2513          .ellipsisMode( this.ellipsisMode[this.ellipsisModeIndex])
2514          .style(this.styleInput[this.styleInputIndex])
2515          .fontSize(30)
2516          .margin(30)
2517        Button('更改ellipsisMode模式:' + this.ellipsisModeStr[this.ellipsisModeIndex]).onClick(() => {
2518          this.ellipsisModeIndex++
2519          if (this.ellipsisModeIndex > (this.ellipsisModeStr.length - 1)) {
2520            this.ellipsisModeIndex = 0
2521          }
2522        }).fontSize(20)
2523        Button('更改textOverflow模式:' + this.textOverflowStr[this.textOverflowIndex]).onClick(() => {
2524          this.textOverflowIndex++
2525          if (this.textOverflowIndex > (this.textOverflowStr.length - 1)) {
2526            this.textOverflowIndex = 0
2527          }
2528        }).fontSize(20)
2529        Button('更改Style大小:' + this.styleInputStr[this.styleInputIndex]).onClick(() => {
2530          this.styleInputIndex++
2531          if (this.styleInputIndex > (this.styleInputStr.length - 1)) {
2532            this.styleInputIndex = 0
2533          }
2534        }).fontSize(20)
2535      }
2536    }
2537  }
2538}
2539```
2540
2541![textInputEllipsisMode](figures/textInputEllipsisMode.png)
2542
2543### 示例17(输入框支持输入状态变化等回调)
2544
2545该示例通过onEditChange、onCopy、onCut、onPaste、onContentScroll接口实现了输入框监测输入状态变化、复制、剪切、粘贴、文本内容滚动回调的效果。
2546
2547```ts
2548// xxx.ets
2549@Entry
2550@Component
2551struct TextInputExample {
2552  @State editStatus: boolean = false;
2553  @State copyValue: string = "";
2554  @State cutValue: string = "";
2555  @State pasteValue: string = "";
2556  @State totalOffsetX: number = 0;
2557  @State totalOffsetY: number = 0;
2558
2559  build() {
2560    Row() {
2561      Column() {
2562        TextInput({ text: "TextInput支持输入状态变化时回调" })
2563          .height(60)
2564          .fontStyle(FontStyle.Italic)
2565          .fontWeight(FontWeight.Bold)
2566          .fontFamily("HarmonyOS Sans")
2567          .copyOption(CopyOptions.LocalDevice)
2568          .textAlign(TextAlign.Center)
2569          .selectedBackgroundColor(Color.Blue)
2570          .caretStyle({ width: '4vp' })
2571          .caretPosition(10)// 设置TextInput光标位置
2572          .selectionMenuHidden(true)// 设置TextInput不弹出系统文本选择菜单
2573          .onEditChange((status: boolean) => {
2574            this.editStatus = status;
2575          })
2576          .defaultFocus(true)// 设置TextInput默认获焦
2577          .enableKeyboardOnFocus(false)// 设置TextInput通过点击以外的方式获焦时,不主动拉起软键盘
2578          .selectAll(false)
2579
2580        Text("editStatus:" + this.editStatus).height(30)
2581
2582        TextInput({ text: "TextInput支持复制操作时回调" })
2583          .height(60)
2584          .fontStyle(FontStyle.Italic)
2585          .fontWeight(FontWeight.Bold)
2586          .fontFamily("HarmonyOS Sans")
2587          .copyOption(CopyOptions.LocalDevice)
2588          .textAlign(TextAlign.Center)
2589          .selectedBackgroundColor(Color.Blue)
2590          .caretStyle({ width: '4vp' })
2591          .onCopy((copyValue: string) => {
2592            this.copyValue = copyValue;
2593          })
2594
2595        Text("copyValue:" + this.copyValue).height(30)
2596
2597        TextInput({ text: "TextInput支持剪切操作时回调" })
2598          .height(60)
2599          .fontStyle(FontStyle.Italic)
2600          .fontWeight(FontWeight.Bold)
2601          .fontFamily("HarmonyOS Sans")
2602          .copyOption(CopyOptions.LocalDevice)
2603          .textAlign(TextAlign.Center)
2604          .selectedBackgroundColor(Color.Blue)
2605          .caretStyle({ width: '4vp' })
2606          .onCut((cutValue: string) => {
2607            this.cutValue = cutValue;
2608          })
2609
2610        Text("cutValue:" + this.cutValue).height(30)
2611
2612        TextInput({ text: "TextInput支持粘贴操作时回调" })
2613          .height(60)
2614          .fontStyle(FontStyle.Italic)
2615          .fontWeight(FontWeight.Bold)
2616          .fontFamily("HarmonyOS Sans")
2617          .copyOption(CopyOptions.LocalDevice)
2618          .textAlign(TextAlign.Center)
2619          .selectedBackgroundColor(Color.Blue)
2620          .caretStyle({ width: '4vp' })
2621          .onPaste((pasteValue: string) => {
2622            this.pasteValue = pasteValue;
2623          })
2624
2625        Text("pasteValue:" + this.pasteValue).height(30)
2626
2627        TextInput({ text: "TextInput支持文本内容滚动时回调: 文本内容宽度超出输入框宽度,滚动文本查看偏移量变化" })
2628          .height(60)
2629          .fontStyle(FontStyle.Italic)
2630          .fontWeight(FontWeight.Bold)
2631          .fontFamily("HarmonyOS Sans")
2632          .copyOption(CopyOptions.LocalDevice)
2633          .textAlign(TextAlign.Center)
2634          .selectedBackgroundColor(Color.Blue)
2635          .caretStyle({ width: '4vp' })
2636          .onContentScroll((totalOffsetX: number, totalOffsetY: number) => {
2637            this.totalOffsetX = totalOffsetX;
2638            this.totalOffsetY = totalOffsetY;
2639          })
2640
2641        Text("totalOffsetX:" + this.totalOffsetX + "  totalOffsetY:" + this.totalOffsetY).height(30)
2642
2643      }.width('100%')
2644    }
2645    .height('100%')
2646  }
2647}
2648```
2649
2650![TextInputEditChange](figures/TextInputEditChange.png)
2651
2652### 示例18(设置最小字体范围与最大字体范围)
2653
2654该示例通过minFontScale、maxFontScale设置字体显示最小与最大范围。
2655
2656```json
2657// 开启应用缩放跟随系统
2658// AppScope/resources/base,新建文件夹profile。
2659// AppScope/resources/base/profile,新建文件configuration.json2660// AppScope/resources/base/profile/configuration.json,增加如下代码。
2661{
2662  "configuration": {
2663    "fontSizeScale": "followSystem",
2664    "fontSizeMaxScale": "3.2"
2665  }
2666}
2667```
2668
2669```json
2670// AppScope/app.json5,修改如下代码。
2671{
2672  "app": {
2673    "bundleName": "com.example.myapplication",
2674    "vendor": "example",
2675    "versionCode": 1000000,
2676    "versionName": "1.0.0",
2677    "icon": "$media:app_icon",
2678    "label": "$string:app_name",
2679    "configuration": "$profile:configuration"
2680  }
2681}
2682```
2683
2684```ts
2685// xxx.ets
2686@Entry
2687@Component
2688struct TextInputExample {
2689  @State minFontScale: number = 0.85;
2690  @State maxFontScale: number = 2;
2691
2692  build() {
2693    Column() {
2694      Column({ space: 30 }) {
2695        Text("系统字体变大变小,变大变小aaaaaaaAAAAAA")
2696        TextInput({
2697          placeholder: 'The text area can hold an unlimited amount of text. input your word...',
2698        })
2699          .minFontScale(this.minFontScale)// 设置最小字体缩放倍数,参数为undefined则跟随系统默认倍数缩放
2700          .maxFontScale(this.maxFontScale)// 设置最大字体缩放倍数,参数为undefined则跟随系统默认倍数缩放
2701      }.width('100%')
2702    }
2703  }
2704}
2705```
2706
2707### 示例19(设置选中指定区域的文本内容)
2708
2709该示例通过setTextSelection方法展示如何设置选中指定区域的文本内容以及菜单的显隐策略。
2710
2711```ts
2712// xxx.ets
2713
2714@Entry
2715@Component
2716struct TextInputExample {
2717  controller: TextInputController = new TextInputController()
2718  @State startIndex: number = 0
2719  @State endIndex: number = 0
2720
2721  build() {
2722    Column({ space: 3 }) {
2723      Text('Selection start:' + this.startIndex + ' end:' + this.endIndex)
2724      TextInput({ text: 'Hello World', controller: this.controller })
2725        .width('95%')
2726        .height(40)
2727        .defaultFocus(true)
2728        .enableKeyboardOnFocus(true)
2729        .onTextSelectionChange((selectionStart: number, selectionEnd: number) => {
2730          this.startIndex = selectionStart
2731          this.endIndex = selectionEnd
2732        })
2733
2734      Button('setTextSelection [0,3], set menuPolicy is MenuPolicy.SHOW')
2735        .onClick(() => {
2736          this.controller.setTextSelection(0, 3, { menuPolicy: MenuPolicy.SHOW })
2737        })
2738    }
2739    .width('100%')
2740    .height('100%')
2741  }
2742}
2743```
2744
2745![textInputSetTextSelection](figures/textInputSetTextSelection.gif)