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