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