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