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-component-general-attributes.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。string类型支持number类型取值的字符串形式，可以附带单位，例如"10"、"10fp"。 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时，按默认值显示。string类型支持number类型取值的字符串形式，可以附带单位，例如"10"、"10fp"。 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) | 是 | 文本字符间距。<br/>单位：fp | 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设置文本最小显示字号。string类型支持number类型取值的字符串形式，可以附带单位，例如"10"、"10fp"。 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) | 是 | 文本最小显示字号。<br/>单位：fp | 813 814### maxFontSize<sup>12+</sup> 815 816maxFontSize(value: number | string | Resource) 817 818设置文本最大显示字号。string类型支持number类型取值的字符串形式，可以附带单位，例如"10"、"10fp"。 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) | 是 | 文本最大显示字号。<br/>单位：fp | 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当[输入框的类型](#inputtype枚举说明)设置为Password、NEW_PASSWORD和NUMBER_PASSWORD模式时，密码保护功能才能生效。非密码输入模式则不会触发该功能。 869 870密码模式时，由于输入框后端的状态和前端应用侧的状态管理变量会不一致，可能导致末尾图标的状态异常。建议在[onSecurityStateChange](#onsecuritystatechange12)上增加状态同步。参考[示例1](#示例1设置与获取光标位置)。 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### enableHapticFeedback<sup>13+</sup> 933 934enableHapticFeedback(isEnabled: boolean) 935 936设置是否开启触控反馈。 937 938**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 939 940**系统能力：** SystemCapability.ArkUI.ArkUI.Full 941 942**参数：** 943 944| 参数名 | 类型 | 必填 | 说明 | 945| ------ | ------- | ---- | ---------------------------------- | 946| isEnabled | boolean | 是 | 是否开启触控反馈。<br/>默认值：true | 947 948> **说明：** 949> 950> 开启触控反馈时，需要在工程的module.json5中配置requestPermissions字段开启振动权限，配置如下： 951> ```json 952> "requestPermissions": [ 953> { 954> "name": "ohos.permission.VIBRATE", 955> } 956> ] 957> ``` 958 959### keyboardAppearance<sup>15+</sup> 960 961keyboardAppearance(appearance: Optional\<KeyboardAppearance>) 962 963设置输入框拉起的键盘样式。 964 965**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 966 967**系统能力：** SystemCapability.ArkUI.ArkUI.Full 968 969**参数：** 970 971| 参数名 | 类型 | 必填 | 说明 | 972| ------ | ----------------------------------------- | ---- | ------------------------------------------------------ | 973| appearance | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[KeyboardAppearance](ts-text-common.md#keyboardappearance15枚举说明)> | 是 | 键盘样式。<br/>默认值：KeyboardAppearance.NONE_IMMERSIVE | 974 975### stopBackPress<sup>15+</sup> 976 977stopBackPress(isStopped: Optional\<boolean>) 978 979设置是否阻止返回键向其它组件或应用侧传递。 980 981**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 982 983**系统能力：** SystemCapability.ArkUI.ArkUI.Full 984 985**参数：** 986 987| 参数名 | 类型 | 必填 | 说明 | 988| ------ | --------------------------------------------------- | ---- | ----------------------------------------- | 989| isStopped | [Optional](ts-universal-attributes-custom-property.md#optional12)\<boolean> | 是 | 是否消费返回键。 <br />默认值：true | 990 991## InputType枚举说明 992 993**系统能力：** SystemCapability.ArkUI.ArkUI.Full 994 995| 名称 | 说明 | 996| ----------------------------- | ------------------------------------------------------------ | 997| Normal | 基本输入模式，无特殊限制。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 998| Password | 密码输入模式。<br/>密码显示小眼睛图标，默认输入文字短暂显示后变成圆点，从API version 12开始，特定设备上输入文字直接显示为圆点。密码输入模式不支持下划线样式。在已启用密码保险箱的情况下，支持用户名、密码的自动保存和自动填充。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 999| Email | 邮箱地址输入模式。<br/>支持数字、字母、下划线、小数点、!、#、$、%、&、'、*、+、-、/、=、?、^、`、\{、\|、\}、~，以及@字符（只能存在一个@字符）。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 1000| Number | 纯数字输入模式。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 1001| PhoneNumber<sup>9+</sup> | 电话号码输入模式。<br/>支持输入数字、空格、+ 、-、*、#、(、)，长度不限。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 1002| USER_NAME<sup>11+</sup> | 用户名输入模式。<br/>在已启用密码保险箱的情况下，支持用户名、密码的自动保存和自动填充。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 1003| NEW_PASSWORD<sup>11+</sup> | 新密码输入模式。<br/>密码显示小眼睛图标，默认输入文字短暂显示后变成圆点，从API version 12开始，特定设备上输入文字直接显示为圆点。在已启用密码保险箱的情况下，支持自动生成新密码。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 1004| NUMBER_PASSWORD<sup>11+</sup> | 纯数字密码输入模式。<br/>密码显示小眼睛图标，默认输入文字短暂显示后变成圆点，从API version 12开始，特定设备上输入文字直接显示为圆点。密码输入模式不支持下划线样式。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 1005| NUMBER_DECIMAL<sup>11+</sup> | 带小数点的数字输入模式。<br/>支持数字，小数点（只能存在一个小数点）。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 1006| URL<sup>12+</sup> | 带URL的输入模式。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 1007 1008## ContentType<sup>12+</sup>枚举说明 1009 1010自动填充类型。 1011 1012**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1013 1014**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1015 1016| 名称 | 值 | 说明 | 1017| -------------------------- | ---- | ------------------------------------------------------------ | 1018| USER_NAME | 0 | 【用户名】在已启用密码保险箱的情况下，支持用户名的自动保存和自动填充。 | 1019| PASSWORD | 1 | 【密码】在已启用密码保险箱的情况下，支持密码的自动保存和自动填充。 | 1020| NEW_PASSWORD | 2 | 【新密码】在已启用密码保险箱的情况下，支持自动生成新密码。 | 1021| FULL_STREET_ADDRESS | 3 | 【详细地址】在已启用情景化自动填充的情况下，支持详细地址的自动保存和自动填充。 | 1022| HOUSE_NUMBER | 4 | 【门牌号】在已启用情景化自动填充的情况下，支持门牌号的自动保存和自动填充。 | 1023| DISTRICT_ADDRESS | 5 | 【区/县】在已启用情景化自动填充的情况下，支持区/县的自动保存和自动填充。 | 1024| CITY_ADDRESS | 6 | 【市】在已启用情景化自动填充的情况下，支持市的自动保存和自动填充。 | 1025| PROVINCE_ADDRESS | 7 | 【省】在已启用情景化自动填充的情况下，支持省的自动保存和自动填充。 | 1026| COUNTRY_ADDRESS | 8 | 【国家】在已启用情景化自动填充的情况下，支持国家的自动保存和自动填充。 | 1027| PERSON_FULL_NAME | 9 | 【姓名】在已启用情景化自动填充的情况下，支持姓名的自动保存和自动填充。 | 1028| PERSON_LAST_NAME | 10 | 【姓氏】在已启用情景化自动填充的情况下，支持姓氏的自动保存和自动填充。 | 1029| PERSON_FIRST_NAME | 11 | 【名字】在已启用情景化自动填充的情况下，支持名字的自动保存和自动填充。 | 1030| PHONE_NUMBER | 12 | 【手机号码】在已启用情景化自动填充的情况下，支持手机号码的自动保存和自动填充。 | 1031| PHONE_COUNTRY_CODE | 13 | 【国家代码】在已启用情景化自动填充的情况下，支持国家代码的自动保存和自动填充。 | 1032| FULL_PHONE_NUMBER | 14 | 【包含国家代码的手机号码】在已启用情景化自动填充的情况下，支持包含国家代码的手机号码的自动保存和自动填充。 | 1033| EMAIL_ADDRESS | 15 | 【邮箱地址】在已启用情景化自动填充的情况下，支持邮箱地址的自动保存和自动填充。 | 1034| BANK_CARD_NUMBER | 16 | 【银行卡号】在已启用情景化自动填充的情况下，支持银行卡号的自动保存和自动填充。 | 1035| ID_CARD_NUMBER | 17 | 【身份证号】在已启用情景化自动填充的情况下，支持身份证号的自动保存和自动填充。 | 1036| NICKNAME | 23 | 【昵称】在已启用情景化自动填充的情况下，支持昵称的自动保存和自动填充。 | 1037| DETAIL_INFO_WITHOUT_STREET | 24 | 【无街道地址】在已启用情景化自动填充的情况下，支持无街道地址的自动保存和自动填充。 | 1038| FORMAT_ADDRESS | 25 | 【标准地址】在已启用情景化自动填充的情况下，支持标准地址的自动保存和自动填充。 | 1039 1040## TextInputStyle<sup>9+</sup>枚举说明 1041 1042**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1043 1044**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1045 1046| 名称 | 说明 | 1047| ------- | ------------------------------------------------------------ | 1048| Default | 默认风格，光标宽1.5vp，光标高度与文本选中底板高度和字体大小相关。 | 1049| Inline | 内联输入风格。文本选中底板高度与输入框高度相同。<br/>内联输入是在有明显的编辑态/非编辑态的区分场景下使用，例如：文件列表视图中的重命名。<br/>不支持showError属性。<br/>内联模式下，不支持拖入文本。 | 1050 1051## PasswordIcon<sup>10+</sup>对象说明 1052 1053**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1054 1055**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1056 1057| 名称 | 类型 | 必填 | 说明 | 1058| ---- | ----- | ---- | ---- | 1059| onIconSrc | string \| [Resource](ts-types.md#resource) | 否 | 密码输入模式时，能够切换密码隐藏的显示状态的图标。<br/>string格式可用于加载网络图片和本地图片。 | 1060| offIconSrc | string \| [Resource](ts-types.md#resource) | 否 | 密码输入模式时，能够切换密码显示的隐藏状态的图标。<br/>string格式可用于加载网络图片和本地图片。 | 1061 1062## EnterKeyType枚举说明 1063 1064输入法回车键类型。 1065 1066**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1067 1068| 名称 | 值 | 说明 | 1069| ---------------------- | --- | ------------------ | 1070| Go | 2 | 显示为开始样式。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 1071| Search | 3 | 显示为搜索样式。 <br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 1072| Send | 4 | 显示为发送样式。 <br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 1073| Next | 5 | 显示为下一步样式。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 1074| Done | 6 | 显示为完成样式。 <br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 1075| PREVIOUS<sup>11+</sup> | 7 | 显示为上一步样式。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 1076| NEW_LINE<sup>11+</sup> | 8 | 显示为换行样式。 <br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 1077 1078 1079## 事件 1080 1081除支持[通用事件](ts-component-general-events.md)外，还支持以下事件： 1082 1083### onChange 1084 1085onChange(callback: EditableTextOnChangeCallback) 1086 1087输入内容发生变化时，触发该回调。 1088 1089在本回调中，若执行了光标操作，需要开发者在预上屏场景下依据previewText参数调整光标逻辑，以适应预上屏场景。 1090 1091**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1092 1093**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1094 1095**参数：** 1096 1097| 参数名 | 类型 | 必填 | 说明 | 1098| ------ | ------ | ---- | -------------------- | 1099| callback | [EditableTextOnChangeCallback](ts-text-common.md#editabletextonchangecallback12) | 是 | 当前输入文本内容变化时的回调。 | 1100 1101### onSubmit 1102 1103onSubmit(callback: (enterKey: EnterKeyType, event: SubmitEvent) => void) 1104 1105按下输入法回车键触发该回调。 1106 1107**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1108 1109**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1110 1111**参数：** 1112 1113| 参数名 | 类型 | 必填 | 说明 | 1114| ------------------- | ------------------------------------------------ | ---- | ------------------------------------------------------------ | 1115| enterKey | [EnterKeyType](#enterkeytype枚举说明) | 是 | 输入法回车键类型。 | 1116| event<sup>11+</sup> | [SubmitEvent](#submitevent11) | 是 | 提交事件。 | 1117 1118### onEditChanged<sup>(deprecated)</sup> 1119 1120onEditChanged(callback: (isEditing: boolean) => void) 1121 1122输入状态变化时，触发该回调。 1123 1124从API 8开始废弃，建议使用onEditChange。 1125 1126**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1127 1128**参数：** 1129 1130| 参数名 | 类型 | 必填 | 说明 | 1131| --------- | ------- | ---- | -------------------- | 1132| isEditing | boolean | 是 | 为true表示正在输入。 | 1133 1134### onEditChange<sup>8+</sup> 1135 1136onEditChange(callback: (isEditing: boolean) => void) 1137 1138输入状态变化时，触发该回调。有光标时为编辑态，无光标时为非编辑态。isEditing为true表示正在输入。 1139 1140**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1141 1142**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1143 1144**参数：** 1145 1146| 参数名 | 类型 | 必填 | 说明 | 1147| --------- | ------- | ---- | -------------------- | 1148| isEditing | boolean | 是 | 为true表示正在输入。 | 1149 1150### onCopy<sup>8+</sup> 1151 1152onCopy(callback: (value: string) => void) 1153 1154进行复制操作时，触发该回调。 1155 1156**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1157 1158**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1159 1160**参数：** 1161 1162| 参数名 | 类型 | 必填 | 说明 | 1163| --------- | ------- | ---- | ---------------- | 1164| value | string | 是 | 复制的文本内容。 | 1165 1166### onCut<sup>8+</sup> 1167 1168onCut(callback: (value: string) => void) 1169 1170进行剪切操作时，触发该回调。 1171 1172**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1173 1174**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1175 1176**参数：** 1177 1178| 参数名 | 类型 | 必填 | 说明 | 1179| --------- | ------- | ---- | ---------------- | 1180| value | string | 是 | 剪切的文本内容。 | 1181 1182### onPaste<sup>8+</sup> 1183 1184onPaste(callback: (value: string, event: PasteEvent) => void) 1185 1186进行粘贴操作时，触发该回调。 1187 1188**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1189 1190**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1191 1192**参数：** 1193 1194| 参数名 | 类型 | 必填 | 说明 | 1195| ------------------- | ------------------------------------------------------------ | ---- | ---------------------- | 1196| value | string | 是 | 粘贴的文本内容。 | 1197| event<sup>11+</sup> | [PasteEvent](ts-basic-components-richeditor.md#pasteevent11) | 是 | 用户自定义的粘贴事件。 | 1198 1199### onTextSelectionChange<sup>10+</sup> 1200 1201onTextSelectionChange(callback: (selectionStart: number, selectionEnd: number) => void) 1202 1203文本选择的位置发生变化或编辑状态下光标位置发生变化时，触发该回调。 1204 1205**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1206 1207**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1208 1209**参数：** 1210 1211| 参数名 | 类型 | 必填 | 说明 | 1212| -------------- | ------ | ---- | --------------------------------------- | 1213| selectionStart | number | 是 | 所选文本的起始位置，文字的起始位置为0。 | 1214| selectionEnd | number | 是 | 所选文本的结束位置。 | 1215 1216### onContentScroll<sup>10+</sup> 1217 1218onContentScroll(callback: (totalOffsetX: number, totalOffsetY: number) => void) 1219 1220文本内容滚动时，触发该回调。 1221 1222**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1223 1224**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1225 1226**参数：** 1227 1228| 参数名 | 类型 | 必填 | 说明 | 1229| ------------ | ------ | ---- | ---------------------------------- | 1230| totalOffsetX | number | 是 | 文本在内容区的横坐标偏移，单位px。 | 1231| totalOffsetY | number | 是 | 文本在内容区的纵坐标偏移，单位px。 | 1232 1233### onSecurityStateChange<sup>12+</sup> 1234 1235onSecurityStateChange(callback: Callback\<boolean>) 1236 1237密码显隐状态切换时，触发该回调。 1238 1239**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1240 1241**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1242 1243**参数：** 1244 1245| 参数名 | 类型 | 必填 | 说明 | 1246| ------------ | ------ | ---- | ---------------------------------- | 1247| callback | Callback\<boolean> | 是 | 回调函数。| 1248 1249### onWillInsert<sup>12+</sup> 1250 1251onWillInsert(callback: Callback\<InsertValue, boolean>) 1252 1253在将要输入时，触发该回调。 1254 1255**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1256 1257**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1258 1259**参数：** 1260 1261| 参数名 | 类型 | 必填 | 说明 | 1262| ------ | ------------------------------------------------------------ | ---- | ------------------ | 1263| callback | Callback\<[InsertValue](ts-text-common.md#insertvalue12对象说明), boolean> | 是 | 在将要输入时调用的回调。<br/>在返回true时，表示正常插入，返回false时，表示不插入。<br/>在预上屏和候选词操作时，该回调不触发。<br/>仅支持系统输入法输入的场景。 | 1264 1265### onDidInsert<sup>12+</sup> 1266 1267onDidInsert(callback: Callback\<InsertValue>) 1268 1269在输入完成时，触发该回调。 1270 1271**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1272 1273**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1274 1275**参数：** 1276 1277| 参数名 | 类型 | 必填 | 说明 | 1278| ------ | ------------------------------------------------------------ | ---- | ------------------ | 1279| callback | Callback\<[InsertValue](ts-text-common.md#insertvalue12对象说明)> | 是 | 在输入完成时调用的回调。<br/>仅支持系统输入法输入的场景。 | 1280 1281### onWillDelete<sup>12+</sup> 1282 1283onWillDelete(callback: Callback\<DeleteValue, boolean>) 1284 1285在将要删除时，触发该回调。 1286 1287**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1288 1289**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1290 1291**参数：** 1292 1293| 参数名 | 类型 | 必填 | 说明 | 1294| ------ | ------------------------------------------------------------ | ---- | ------------------ | 1295| callback | Callback\<[DeleteValue](ts-text-common.md#deletevalue12对象说明), boolean> | 是 | 在将要删除时调用的回调。<br/>在返回true时，表示正常删除，返回false时，表示不删除。<br/>在预上屏删除操作时，该回调不触发。<br/>仅支持系统输入法输入的场景。 | 1296 1297### onDidDelete<sup>12+</sup> 1298 1299onDidDelete(callback: Callback\<DeleteValue>) 1300 1301在删除完成时，触发该回调。 1302 1303**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1304 1305**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1306 1307**参数：** 1308 1309| 参数名 | 类型 | 必填 | 说明 | 1310| ------ | ------------------------------------------------------------ | ---- | ------------------ | 1311| callback | Callback\<[DeleteValue](ts-text-common.md#deletevalue12对象说明)> | 是 | 在删除完成时调用的回调。<br/>仅支持系统输入法输入的场景。 | 1312 1313### onWillChange<sup>15+</sup> 1314 1315onWillChange(callback: Callback\<EditableTextChangeValue, boolean>) 1316 1317在文本内容将要发生变化时，触发该回调。 1318 1319onWillChange的回调时序晚于onWillInsert、onWillDelete，早于onDidInsert、onDidDelete。 1320 1321**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 1322 1323**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1324 1325**参数：** 1326 1327| 参数名 | 类型 | 必填 | 说明 | 1328| ------ | ------------------------------------------------------------ | ---- | ------------------ | 1329| callback | Callback\<[EditableTextChangeValue](ts-text-common.md#editabletextchangevalue15), boolean> | 是 | 在文本内容将要发生变化时的回调。<br/>返回true时，表示正常修改。返回false时，表示拦截此次触发。 | 1330 1331## TextInputController<sup>8+</sup> 1332 1333TextInput组件的控制器继承自[TextContentControllerBase](ts-types.md#textcontentcontrollerbase10)。 1334 1335**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1336 1337**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1338 1339### 导入对象 1340``` 1341controller: TextInputController = new TextInputController() 1342``` 1343 1344### constructor<sup>8+</sup> 1345 1346constructor() 1347 1348TextInputController的构造函数。 1349 1350**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1351 1352**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1353 1354### caretPosition<sup>8+</sup> 1355 1356caretPosition(value: number): void 1357 1358设置输入光标的位置。当取值小于0时，取0，大于文本长度时，显示在文本末尾。 1359 1360**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1361 1362**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1363 1364**参数：** 1365 1366| 参数名 | 类型 | 必填 | 说明 | 1367| ----- | ------ | ---- | ------ | 1368| value | number | 是 | 从字符串开始到光标所在位置的字符长度。 | 1369### setTextSelection<sup>10+</sup> 1370 1371setTextSelection(selectionStart: number, selectionEnd: number, options?: SelectionOptions): void 1372 1373设置文本选择区域并高亮显示。 1374 1375**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1376 1377**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1378 1379**参数：** 1380 1381| 参数名 | 类型 | 必填 | 说明 | 1382| ------- | ------ | ---- | ----- | 1383| selectionStart | number | 是 | 文本选择区域起始位置，文本框中文字的起始位置为0。 | 1384| selectionEnd | number | 是 | 文本选择区域结束位置。 | 1385| options<sup>12+</sup> | [SelectionOptions](ts-types.md#selectionoptions12对象说明) | 否 | 选中文字时的配置。<br />默认值：MenuPolicy.DEFAULT<br/>从API version 12开始，该接口中的options参数支持在原子化服务中使用。 | 1386 1387> **说明：** 1388> 1389> 如果selectionStart或selectionEnd被赋值为undefined时，当作0处理。 1390> 1391> 如果selectionMenuHidden被赋值为true或设备为2in1时，即使options被赋值为MenuPolicy.SHOW，调用setTextSelection也不弹出菜单。 1392> 1393> 如果选中的文本含有emoji表情时，表情的起始位置包含在设置的文本选中区域内就会被选中。 1394 1395### stopEditing<sup>10+</sup> 1396 1397stopEditing(): void 1398 1399退出编辑态。 1400 1401**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1402 1403**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1404 1405## UnderlineColor<sup>12+</sup>对象说明 1406 1407**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 1408 1409**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1410 1411| 名称 | 类型 | 必填 | 说明 | 1412| ---- | ----- | ---- | ---- | 1413| typing | [ResourceColor](ts-types.md#resourcecolor) \| undefined | 否 | 键入时下划线颜色。不填写、undefined、null、无效值时恢复默认。 | 1414| normal | [ResourceColor](ts-types.md#resourcecolor) \| undefined | 否 | 非特殊状态时下划线颜色。不填写、undefined、null、无效值时恢复默认。 | 1415| error | [ResourceColor](ts-types.md#resourcecolor) \| undefined | 否 | 错误时下划线颜色。不填写、undefined、null、无效值时恢复默认。此选项会修改showCounter属性中达到最大字符数时的颜色。 | 1416| disable | [ResourceColor](ts-types.md#resourcecolor) \| undefined | 否 | 禁用时下划线颜色。不填写、undefined、null、无效值时恢复默认。 | 1417 1418## SubmitEvent<sup>11+</sup> 1419 1420定义用户提交事件。 1421 1422**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1423 1424**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1425 1426### 属性 1427 1428**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1429 1430**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1431 1432| 名称 | 类型 | 必填 | 说明 | 1433| ---- | ----- | ---- | ---- | 1434| text | string | 是 | 输入框文本内容。 | 1435 1436### keepEditableState 1437 1438keepEditableState(): void 1439 1440用户自定义输入框编辑状态，调用时保持编辑态。 1441 1442**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 1443 1444**系统能力：** SystemCapability.ArkUI.ArkUI.Full 1445 1446## 示例 1447 1448### 示例1（设置与获取光标位置） 1449 1450该示例通过controller实现了光标位置的设置与获取的功能。 1451 1452```ts 1453// xxx.ets 1454@Entry 1455@Component 1456struct TextInputExample { 1457 @State text: string = '' 1458 @State positionInfo: CaretOffset = { index: 0, x: 0, y: 0 } 1459 @State passwordState: boolean = false 1460 controller: TextInputController = new TextInputController() 1461 1462 build() { 1463 Column() { 1464 TextInput({ text: this.text, placeholder: 'input your word...', controller: this.controller }) 1465 .placeholderColor(Color.Grey) 1466 .placeholderFont({ size: 14, weight: 400 }) 1467 .caretColor(Color.Blue) 1468 .width('95%') 1469 .height(40) 1470 .margin(20) 1471 .fontSize(14) 1472 .fontColor(Color.Black) 1473 .inputFilter('[a-z]', (e) => { 1474 console.log(JSON.stringify(e)) 1475 }) 1476 .onChange((value: string) => { 1477 this.text = value 1478 }) 1479 Text(this.text) 1480 Button('Set caretPosition 1') 1481 .margin(15) 1482 .onClick(() => { 1483 // 将光标移动至第一个字符后 1484 this.controller.caretPosition(1) 1485 }) 1486 Button('Get CaretOffset') 1487 .margin(15) 1488 .onClick(() => { 1489 this.positionInfo = this.controller.getCaretOffset() 1490 }) 1491 // 密码输入框 1492 TextInput({ placeholder: 'input your password...' }) 1493 .width('95%') 1494 .height(40) 1495 .margin(20) 1496 .type(InputType.Password) 1497 .maxLength(9) 1498 .showPasswordIcon(true) 1499 .showPassword(this.passwordState) 1500 .onSecurityStateChange(((isShowPassword: boolean) => { 1501 // 更新密码显示状态 1502 console.info('isShowPassword', isShowPassword) 1503 this.passwordState = isShowPassword 1504 })) 1505 // 邮箱地址自动填充类型 1506 TextInput({ placeholder: 'input your email...' }) 1507 .width('95%') 1508 .height(40) 1509 .margin(20) 1510 .contentType(ContentType.EMAIL_ADDRESS) 1511 .maxLength(9) 1512 // 内联风格输入框 1513 TextInput({ text: 'inline style' }) 1514 .width('95%') 1515 .height(50) 1516 .margin(20) 1517 .borderRadius(0) 1518 .style(TextInputStyle.Inline) 1519 }.width('100%') 1520 } 1521} 1522``` 1523 1524 1525 1526### 示例2（设置下划线） 1527 1528该示例通过showUnderline、showError、showUnit、passwordIcon属性展示了下划线在不同场景的效果。 1529 1530```ts 1531// xxx.ets 1532@Entry 1533@Component 1534struct TextInputExample { 1535 @State passWordSrc1: Resource = $r('app.media.ImageOne'); 1536 @State passWordSrc2: Resource = $r('app.media.ImageTwo'); 1537 @State textError: string = ''; 1538 @State text: string = ''; 1539 @State nameText: string = 'test'; 1540 1541 @Builder 1542 itemEnd() { 1543 Select([{ value: 'KB' }, 1544 { value: 'MB' }, 1545 { value: 'GB' }, 1546 { value: 'TB', }]) 1547 .height("48vp") 1548 .borderRadius(0) 1549 .selected(2) 1550 .align(Alignment.Center) 1551 .value('MB') 1552 .font({ size: 20, weight: 500 }) 1553 .fontColor('#182431') 1554 .selectedOptionFont({ size: 20, weight: 400 }) 1555 .optionFont({ size: 20, weight: 400 }) 1556 .backgroundColor(Color.Transparent) 1557 .responseRegion({ 1558 height: "40vp", 1559 width: "80%", 1560 x: '10%', 1561 y: '6vp' 1562 }) 1563 .onSelect((index: number) => { 1564 console.info('Select:' + index); 1565 }) 1566 } 1567 1568 build() { 1569 Column({ space: 20 }) { 1570 // 自定义密码显示图标 1571 TextInput({ placeholder: 'user define password icon' }) 1572 .type(InputType.Password) 1573 .width(350) 1574 .height(60) 1575 .passwordIcon({ onIconSrc: this.passWordSrc1, offIconSrc: this.passWordSrc2 }) 1576 // 下划线模式 1577 TextInput({ placeholder: 'underline style' }) 1578 .showUnderline(true) 1579 .width(350) 1580 .height(60) 1581 .showError('Error') 1582 .showUnit(this.itemEnd) 1583 1584 Text(`用户名：${this.text}`) 1585 .width(350) 1586 TextInput({ placeholder: '请输入用户名', text: this.text }) 1587 .showUnderline(true) 1588 .width(350) 1589 .showError(this.textError) 1590 .onChange((value: string) => { 1591 this.text = value 1592 }) 1593 .onSubmit((enterKey: EnterKeyType, event: SubmitEvent) => { 1594 // 用户名不正确会清空输入框和用户名并提示错误文本 1595 if (this.text == this.nameText) { 1596 this.textError = ''; 1597 } else { 1598 this.textError = '用户名输入错误'; 1599 this.text = ''; 1600 // 调用keepEditableState方法，输入框保持编辑态 1601 event.keepEditableState(); 1602 } 1603 }) 1604 // 设置下划线颜色 1605 TextInput({ placeholder: '提示文本内容' }) 1606 .width(350) 1607 .showUnderline(true) 1608 .underlineColor({ 1609 normal: Color.Orange, 1610 typing: Color.Green, 1611 error: Color.Red, 1612 disable: Color.Gray 1613 }); 1614 TextInput({ placeholder: '提示文本内容' }) 1615 .width(350) 1616 .showUnderline(true) 1617 .underlineColor(Color.Gray); 1618 1619 }.width('100%').margin({ top: 10 }) 1620 } 1621} 1622``` 1623 1624 1625 1626### 示例3（设置自定义键盘） 1627 1628该示例通过customKeyboard属性实现了自定义键盘的功能。 1629 1630```ts 1631// xxx.ets 1632@Entry 1633@Component 1634struct TextInputExample { 1635 controller: TextInputController = new TextInputController(); 1636 @State inputValue: string = ""; 1637 1638 // 自定义键盘组件 1639 @Builder 1640 CustomKeyboardBuilder() { 1641 Column() { 1642 Button('x').onClick(() => { 1643 // 关闭自定义键盘 1644 this.controller.stopEditing(); 1645 }) 1646 Grid() { 1647 ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'], (item: number | string) => { 1648 GridItem() { 1649 Button(item + "") 1650 .width(110).onClick(() => { 1651 this.inputValue += item; 1652 }) 1653 } 1654 }) 1655 }.maxCount(3).columnsGap(10).rowsGap(10).padding(5) 1656 }.backgroundColor(Color.Gray) 1657 } 1658 1659 build() { 1660 Column() { 1661 TextInput({ controller: this.controller, text: this.inputValue })// 绑定自定义键盘 1662 .customKeyboard(this.CustomKeyboardBuilder()).margin(10).border({ width: 1 }).height('48vp') 1663 } 1664 } 1665} 1666``` 1667 1668 1669 1670### 示例4（设置右侧清除按钮样式） 1671 1672该示例通过cancelButton属性展示了自定义右侧清除按钮样式的效果。 1673 1674```ts 1675// xxx.ets 1676@Entry 1677@Component 1678struct TextInputExample { 1679 @State text: string = ''; 1680 controller: TextInputController = new TextInputController(); 1681 1682 build() { 1683 Column() { 1684 TextInput({ placeholder: 'input ...', controller: this.controller }) 1685 .width(380) 1686 .height(60) 1687 .cancelButton({ 1688 style: CancelButtonStyle.CONSTANT, 1689 icon: { 1690 size: 45, 1691 src: $r('app.media.app_icon'), 1692 color: Color.Blue 1693 } 1694 }) 1695 .onChange((value: string) => { 1696 this.text = value; 1697 }) 1698 } 1699 } 1700} 1701``` 1702 1703 1704 1705### 示例5（设置计数器） 1706 1707该示例通过maxLength、showCounter、showUnderline属性实现了计数器的功能。 1708 1709```ts 1710// xxx.ets 1711@Entry 1712@Component 1713struct TextInputExample { 1714 @State text: string = ''; 1715 controller: TextInputController = new TextInputController(); 1716 1717 build() { 1718 Column() { 1719 TextInput({ text: this.text, controller: this.controller }) 1720 .placeholderFont({ size: 16, weight: 400 }) 1721 .width(336) 1722 .height(56) 1723 .maxLength(6) 1724 .showUnderline(true) 1725 .showCounter(true, 1726 { thresholdPercentage: 50, highlightBorder: true })//计数器显示效果为用户当前输入字符数/最大字符限制数。最大字符限制数通过maxLength()接口设置。 1727 //如果用户当前输入字符数达到最大字符限制乘50%（thresholdPercentage）。字符计数器显示。 1728 //用户设置highlightBorder为false时，配置取消红色边框。不设置此参数时，默认为true。 1729 .onChange((value: string) => { 1730 this.text = value; 1731 }) 1732 }.width('100%').height('100%').backgroundColor('#F1F3F5') 1733 } 1734} 1735``` 1736 1737 1738 1739 1740### 示例6（电话号码格式化） 1741 1742该示例通过onChange回调实现了电话号码格式化为XXX XXXX XXXX的功能。 1743 1744```ts 1745// xxx.ets 1746@Entry 1747@Component 1748struct TextInputExample { 1749 @State submitValue: string = ''; 1750 @State text: string = ''; 1751 public readonly NUM_TEXT_MAXSIZE_LENGTH = 13; 1752 @State teleNumberNoSpace: string = ""; 1753 @State nextCaret: number = -1; // 用于记录下次光标设置的位置 1754 @State actualCh: number = -1; // 用于记录光标在第i个数字后插入或者第i个数字前删除 1755 @State lastCaretPosition: number = 0; 1756 @State lastCaretPositionEnd: number = 0; 1757 controller: TextInputController = new TextInputController(); 1758 1759 isEmpty(str?: string): boolean { 1760 return str == 'undefined' || !str || !new RegExp("[^\\s]").test(str); 1761 } 1762 1763 checkNeedNumberSpace(numText: string) { 1764 let isSpace: RegExp = new RegExp('[\\+;,#\\*]', 'g'); 1765 let isRule: RegExp = new RegExp('^\\+.*'); 1766 1767 if (isSpace.test(numText)) { 1768 // 如果电话号码里有特殊字符，就不加空格 1769 if (isRule.test(numText)) { 1770 return true; 1771 } else { 1772 return false; 1773 } 1774 } 1775 return true; 1776 } 1777 1778 removeSpace(str: string): string { 1779 if (this.isEmpty(str)) { 1780 return ''; 1781 } 1782 return str.replace(new RegExp("[\\s]", "g"), ''); 1783 } 1784 1785 setCaret() { 1786 if (this.nextCaret != -1) { 1787 console.log("to keep caret position right, change caret to", this.nextCaret); 1788 this.controller.caretPosition(this.nextCaret); 1789 this.nextCaret = -1; 1790 } 1791 } 1792 1793 calcCaretPosition(nextText: string) { 1794 let befNumberNoSpace: string = this.removeSpace(this.text); 1795 this.actualCh = 0; 1796 if (befNumberNoSpace.length < this.teleNumberNoSpace.length) { // 插入场景 1797 for (let i = 0; i < this.lastCaretPosition; i++) { 1798 if (this.text[i] != ' ') { 1799 this.actualCh += 1; 1800 } 1801 } 1802 this.actualCh += this.teleNumberNoSpace.length - befNumberNoSpace.length; 1803 console.log("actualCh: " + this.actualCh); 1804 for (let i = 0; i < nextText.length; i++) { 1805 if (nextText[i] != ' ') { 1806 this.actualCh -= 1; 1807 if (this.actualCh <= 0) { 1808 this.nextCaret = i + 1; 1809 break; 1810 } 1811 } 1812 } 1813 } else if (befNumberNoSpace.length > this.teleNumberNoSpace.length) { // 删除场景 1814 if (this.lastCaretPosition === this.text.length) { 1815 console.log("Caret at last, no need to change"); 1816 } else if (this.lastCaretPosition === this.lastCaretPositionEnd) { 1817 // 按键盘上回退键一个一个删的情况 1818 for (let i = this.lastCaretPosition; i < this.text.length; i++) { 1819 if (this.text[i] != ' ') { 1820 this.actualCh += 1; 1821 } 1822 } 1823 for (let i = nextText.length - 1; i >= 0; i--) { 1824 if (nextText[i] != ' ') { 1825 this.actualCh -= 1; 1826 if (this.actualCh <= 0) { 1827 this.nextCaret = i; 1828 break; 1829 } 1830 } 1831 } 1832 } else { 1833 // 剪切/手柄选择 一次删多个字符 1834 this.nextCaret = this.lastCaretPosition; // 保持光标位置 1835 } 1836 } 1837 } 1838 1839 build() { 1840 Column() { 1841 Row() { 1842 TextInput({ text: `${this.text}`, controller: this.controller }).type(InputType.PhoneNumber).height('48vp') 1843 .onChange((number: string) => { 1844 this.teleNumberNoSpace = this.removeSpace(number); 1845 let nextText: string = ""; 1846 if (this.teleNumberNoSpace.length > this.NUM_TEXT_MAXSIZE_LENGTH - 2) { 1847 nextText = this.teleNumberNoSpace; 1848 } else if (this.checkNeedNumberSpace(number)) { 1849 if (this.teleNumberNoSpace.length <= 3) { 1850 nextText = this.teleNumberNoSpace; 1851 } else { 1852 let split1: string = this.teleNumberNoSpace.substring(0, 3); 1853 let split2: string = this.teleNumberNoSpace.substring(3); 1854 nextText = split1 + ' ' + split2; 1855 if (this.teleNumberNoSpace.length > 7) { 1856 split2 = this.teleNumberNoSpace.substring(3, 7); 1857 let split3: string = this.teleNumberNoSpace.substring(7); 1858 nextText = split1 + ' ' + split2 + ' ' + split3; 1859 } 1860 } 1861 } else { 1862 nextText = number; 1863 } 1864 console.log("onChange Triggered:" + this.text + "|" + nextText + "|" + number); 1865 if (this.text === nextText && nextText === number) { 1866 // 此时说明数字已经格式化完成了 在这个时候改变光标位置不会被重置掉 1867 this.setCaret(); 1868 } else { 1869 this.calcCaretPosition(nextText); 1870 } 1871 this.text = nextText; 1872 }) 1873 .onTextSelectionChange((selectionStart, selectionEnd) => { 1874 // 记录光标位置 1875 console.log("selection change: ", selectionStart, selectionEnd); 1876 this.lastCaretPosition = selectionStart; 1877 this.lastCaretPositionEnd = selectionEnd; 1878 }) 1879 } 1880 } 1881 .width('100%') 1882 .height("100%") 1883 } 1884} 1885``` 1886 1887 1888### 示例7（设置文本断行规则） 1889 1890该示例通过wordBreak属性实现了TextArea不同断行规则下的效果。 1891 1892```ts 1893// xxx.ets 1894@Entry 1895@Component 1896struct TextInputExample { 1897 @State textStrEn: string = 1898 'This is set wordBreak to WordBreak text Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu.'; 1899 @State textStrZn: string = 1900 '多行文本输入框组件，当输入的文本内容超过组件宽度时会自动换行显示。\n高度未设置时，组件无默认高度，自适应内容高度。宽度未设置时，默认撑满最大宽度。'; 1901 1902 build() { 1903 Row() { 1904 Column() { 1905 Text("TextInput为inline模式，WordBreakType属性为NORMAL的样式：").fontSize(16).fontColor(0xCCCCCC) 1906 TextInput({ 1907 text: this.textStrEn 1908 }) 1909 .margin(10) 1910 .fontSize(16) 1911 .style(TextInputStyle.Inline)// Inline模式 1912 .wordBreak(WordBreak.NORMAL) // 非Inline模式该属性无效 1913 1914 Text("TextInput为inline模式，英文文本，WordBreakType属性为BREAK_ALL的样式：").fontSize(16).fontColor(0xCCCCCC) 1915 TextInput({ 1916 text: this.textStrEn 1917 }) 1918 .margin(10) 1919 .fontSize(16) 1920 .style(TextInputStyle.Inline) 1921 .wordBreak(WordBreak.BREAK_ALL) 1922 1923 Text("TextInput为inline模式，中文文本，WordBreakType属性为BREAK_ALL的样式：").fontSize(16).fontColor(0xCCCCCC) 1924 TextInput({ 1925 text: this.textStrZn 1926 }) 1927 .margin(10) 1928 .fontSize(16) 1929 .style(TextInputStyle.Inline) 1930 .wordBreak(WordBreak.BREAK_ALL) 1931 1932 Text("TextInput为inline模式，WordBreakType属性为BREAK_WORD的样式：").fontSize(16).fontColor(0xCCCCCC) 1933 TextInput({ 1934 text: this.textStrEn 1935 }) 1936 .margin(10) 1937 .fontSize(16) 1938 .style(TextInputStyle.Inline) 1939 .wordBreak(WordBreak.BREAK_WORD) 1940 }.width('100%') 1941 }.height('100%').margin(10) 1942 } 1943} 1944``` 1945 1946 1947### 示例8（设置文本样式） 1948 1949该示例通过lineHeight、letterSpacing、decoration属性展示了不同样式的文本效果。 1950 1951```ts 1952// xxx.ets 1953@Entry 1954@Component 1955struct TextInputExample { 1956 build() { 1957 Row() { 1958 Column() { 1959 Text('lineHeight').fontSize(9).fontColor(0xCCCCCC) 1960 TextInput({ text: 'lineHeight unset' }) 1961 .border({ width: 1 }).padding(10).margin(5) 1962 TextInput({ text: 'lineHeight 15' }) 1963 .border({ width: 1 }).padding(10).margin(5).lineHeight(15) 1964 TextInput({ text: 'lineHeight 30' }) 1965 .border({ width: 1 }).padding(10).margin(5).lineHeight(30) 1966 1967 Text('letterSpacing').fontSize(9).fontColor(0xCCCCCC) 1968 TextInput({ text: 'letterSpacing 0' }) 1969 .border({ width: 1 }).padding(5).margin(5).letterSpacing(0) 1970 TextInput({ text: 'letterSpacing 3' }) 1971 .border({ width: 1 }).padding(5).margin(5).letterSpacing(3) 1972 TextInput({ text: 'letterSpacing -1' }) 1973 .border({ width: 1 }).padding(5).margin(5).letterSpacing(-1) 1974 1975 Text('decoration').fontSize(9).fontColor(0xCCCCCC) 1976 TextInput({ text: 'LineThrough, Red' }) 1977 .border({ width: 1 }).padding(5).margin(5) 1978 .decoration({ type: TextDecorationType.LineThrough, color: Color.Red }) 1979 TextInput({ text: 'Overline, Red, DASHED' }) 1980 .border({ width: 1 }).padding(5).margin(5) 1981 .decoration({ type: TextDecorationType.Overline, color: Color.Red, style: TextDecorationStyle.DASHED }) 1982 TextInput({ text: 'Underline, Red, WAVY' }) 1983 .border({ width: 1 }).padding(5).margin(5) 1984 .decoration({ type: TextDecorationType.Underline, color: Color.Red, style: TextDecorationStyle.WAVY }) 1985 }.height('90%') 1986 } 1987 .width('90%') 1988 .margin(10) 1989 } 1990} 1991``` 1992 1993 1994 1995### 示例9（设置文字特性效果） 1996 1997该示例通过fontFeature属性实现了文本在不同文字特性下的展示效果。 1998 1999```ts 2000// xxx.ets 2001@Entry 2002@Component 2003struct TextInputExample { 2004 @State text1: string = 'This is ss01 on : 0123456789'; 2005 @State text2: string = 'This is ss01 off: 0123456789'; 2006 2007 build() { 2008 Column() { 2009 TextInput({ text: this.text1 }) 2010 .fontSize(20) 2011 .margin({ top: 200 }) 2012 .fontFeature("\"ss01\" on") 2013 TextInput({ text: this.text2 }) 2014 .margin({ top: 10 }) 2015 .fontSize(20) 2016 .fontFeature("\"ss01\" off") 2017 } 2018 .width("90%") 2019 .margin("5%") 2020 } 2021} 2022``` 2023 2024 2025 2026### 示例10（自定义键盘避让） 2027 2028该示例通过自定义键盘实现了键盘避让的效果。 2029 2030```ts 2031// xxx.ets 2032@Entry 2033@Component 2034struct TextInputExample { 2035 controller: TextInputController = new TextInputController(); 2036 @State inputValue: string = ""; 2037 @State height1: string | number = '80%'; 2038 @State supportAvoidance: boolean = true; 2039 2040 // 自定义键盘组件 2041 @Builder 2042 CustomKeyboardBuilder() { 2043 Column() { 2044 Row() { 2045 Button('x').onClick(() => { 2046 // 关闭自定义键盘 2047 this.controller.stopEditing(); 2048 }).margin(10) 2049 } 2050 2051 Grid() { 2052 ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'], (item: number | string) => { 2053 GridItem() { 2054 Button(item + "") 2055 .width(110).onClick(() => { 2056 this.inputValue += item; 2057 }) 2058 } 2059 }) 2060 }.maxCount(3).columnsGap(10).rowsGap(10).padding(5) 2061 }.backgroundColor(Color.Gray) 2062 } 2063 2064 build() { 2065 Column() { 2066 Row() { 2067 Button("20%") 2068 .fontSize(24) 2069 .onClick(() => { 2070 this.height1 = "20%"; 2071 }) 2072 Button("80%") 2073 .fontSize(24) 2074 .margin({ left: 20 }) 2075 .onClick(() => { 2076 this.height1 = "80%"; 2077 }) 2078 } 2079 .justifyContent(FlexAlign.Center) 2080 .alignItems(VerticalAlign.Bottom) 2081 .height(this.height1) 2082 .width("100%") 2083 .padding({ bottom: 50 }) 2084 2085 TextInput({ controller: this.controller, text: this.inputValue })// 绑定自定义键盘 2086 .customKeyboard(this.CustomKeyboardBuilder(), { supportAvoidance: this.supportAvoidance }) 2087 .margin(10) 2088 .border({ width: 1 }) 2089 2090 } 2091 } 2092} 2093``` 2094 2095 2096 2097### 示例11（设置文本自适应） 2098 2099该示例通过minFontSize、maxFontSize、heightAdaptivePolicy属性实现了文本自适应字号的功能。 2100 2101```ts 2102// xxx.ets 2103@Entry 2104@Component 2105struct TextInputExample { 2106 build() { 2107 Row() { 2108 Column() { 2109 Text('heightAdaptivePolicy').fontSize(9).fontColor(0xCCCCCC) 2110 TextInput({ text: 'This is the text without the height adaptive policy set' }) 2111 .width('80%').height(50).borderWidth(1).margin(1) 2112 TextInput({ text: 'This is the text with the height adaptive policy set' }) 2113 .width('80%') 2114 .height(50) 2115 .borderWidth(1) 2116 .margin(1) 2117 .minFontSize(4) 2118 .maxFontSize(40) 2119 .maxLines(3) 2120 .heightAdaptivePolicy(TextHeightAdaptivePolicy.MAX_LINES_FIRST) 2121 TextInput({ text: 'This is the text with the height adaptive policy set' }) 2122 .width('80%') 2123 .height(50) 2124 .borderWidth(1) 2125 .margin(1) 2126 .minFontSize(4) 2127 .maxFontSize(40) 2128 .maxLines(3) 2129 .heightAdaptivePolicy(TextHeightAdaptivePolicy.MIN_FONT_SIZE_FIRST) 2130 TextInput({ text: 'This is the text with the height adaptive policy set' }) 2131 .width('80%') 2132 .height(50) 2133 .borderWidth(1) 2134 .margin(1) 2135 .minFontSize(4) 2136 .maxFontSize(40) 2137 .maxLines(3) 2138 .heightAdaptivePolicy(TextHeightAdaptivePolicy.LAYOUT_CONSTRAINT_FIRST) 2139 }.height('90%') 2140 } 2141 .width('90%') 2142 .margin(10) 2143 } 2144} 2145``` 2146 2147 2148 2149### 示例12（设置折行规则） 2150 2151该示例通过lineBreakStrategy属性实现了TextArea不同折行规则下的效果。 2152 2153```ts 2154// xxx.ets 2155@Entry 2156@Component 2157struct TextInputExample { 2158 @State message1: string = 2159 "They can be classified as built-in components–those directly provided by the ArkUI framework and custom components – those defined by developers" + 2160 "The built-in components include buttons radio buttonsprogress indicators and text You can set the rendering effectof thesecomponents in method chaining mode," + 2161 "page components are divided into independent UI units to implementindependent creation development and reuse of different units on pages making pages more engineering-oriented."; 2162 @State lineBreakStrategyIndex: number = 0; 2163 @State lineBreakStrategy: LineBreakStrategy[] = 2164 [LineBreakStrategy.GREEDY, LineBreakStrategy.HIGH_QUALITY, LineBreakStrategy.BALANCED]; 2165 @State lineBreakStrategyStr: string[] = ['GREEDY', 'HIGH_QUALITY', 'BALANCED']; 2166 2167 build() { 2168 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start }) { 2169 Text('lineBreakStrategy').fontSize(9).fontColor(0xCCCCCC) 2170 TextInput({ text: this.message1 }) 2171 .fontSize(12) 2172 .border({ width: 1 }) 2173 .padding(10) 2174 .width('100%') 2175 .maxLines(12) 2176 .style(TextInputStyle.Inline) 2177 .lineBreakStrategy(this.lineBreakStrategy[this.lineBreakStrategyIndex]) 2178 Row() { 2179 Button('当前lineBreakStrategy模式：' + this.lineBreakStrategyStr[this.lineBreakStrategyIndex]).onClick(() => { 2180 this.lineBreakStrategyIndex++; 2181 if (this.lineBreakStrategyIndex > (this.lineBreakStrategyStr.length - 1)) { 2182 this.lineBreakStrategyIndex = 0; 2183 } 2184 }) 2185 } 2186 }.height(700).width(370).padding({ left: 35, right: 35, top: 35 }) 2187 } 2188} 2189``` 2190 2191 2192 2193### 示例13（支持插入和删除回调） 2194该示例通过onWillInsert、onDidInsert、onWillDelete、onDidDelete接口实现了插入和删除的效果。 2195```ts 2196// xxx.ets 2197@Entry 2198@Component 2199struct TextInputExample { 2200 @State insertValue: string = ""; 2201 @State deleteValue: string = ""; 2202 @State insertOffset: number = 0; 2203 @State deleteOffset: number = 0; 2204 @State deleteDirection: number = 0; 2205 2206 build() { 2207 Row() { 2208 Column() { 2209 TextInput({ text: "TextInput支持插入回调文本" }) 2210 .height(60) 2211 .onWillInsert((info: InsertValue) => { 2212 this.insertValue = info.insertValue; 2213 return true; 2214 }) 2215 .onDidInsert((info: InsertValue) => { 2216 this.insertOffset = info.insertOffset; 2217 }) 2218 2219 Text("insertValue:" + this.insertValue + " insertOffset:" + this.insertOffset).height(30) 2220 2221 TextInput({ text: "TextInput支持删除回调文本b" }) 2222 .height(60) 2223 .onWillDelete((info: DeleteValue) => { 2224 this.deleteValue = info.deleteValue; 2225 info.direction; 2226 return true; 2227 }) 2228 .onDidDelete((info: DeleteValue) => { 2229 this.deleteOffset = info.deleteOffset; 2230 this.deleteDirection = info.direction; 2231 }) 2232 2233 Text("deleteValue:" + this.deleteValue + " deleteOffset:" + this.deleteOffset).height(30) 2234 Text("deleteDirection:" + (this.deleteDirection == 0 ? "BACKWARD" : "FORWARD")).height(30) 2235 2236 }.width('100%') 2237 } 2238 .height('100%') 2239 } 2240} 2241``` 2242 2243 2244 2245### 示例14（文本扩展自定义菜单） 2246 2247该示例通过editMenuOptions接口实现了文本设置自定义菜单扩展项的文本内容、图标以及回调的功能。 2248 2249```ts 2250// xxx.ets 2251@Entry 2252@Component 2253struct TextInputExample { 2254 @State text: string = 'TextInput editMenuOptions' 2255 onCreateMenu = (menuItems: Array<TextMenuItem>) => { 2256 let item1: TextMenuItem = { 2257 content: 'custom1', 2258 icon: $r('app.media.startIcon'), 2259 id: TextMenuItemId.of('custom1'), 2260 }; 2261 let item2: TextMenuItem = { 2262 content: 'custom2', 2263 id: TextMenuItemId.of('custom2'), 2264 icon: $r('app.media.startIcon'), 2265 }; 2266 menuItems.push(item1); 2267 menuItems.unshift(item2); 2268 return menuItems; 2269 } 2270 onMenuItemClick = (menuItem: TextMenuItem, textRange: TextRange) => { 2271 if (menuItem.id.equals(TextMenuItemId.of("custom2"))) { 2272 console.log("拦截 id: custom2 start:" + textRange.start + "; end:" + textRange.end); 2273 return true; 2274 } 2275 if (menuItem.id.equals(TextMenuItemId.COPY)) { 2276 console.log("拦截 COPY start:" + textRange.start + "; end:" + textRange.end); 2277 return true; 2278 } 2279 if (menuItem.id.equals(TextMenuItemId.SELECT_ALL)) { 2280 console.log("不拦截 SELECT_ALL start:" + textRange.start + "; end:" + textRange.end); 2281 return false; 2282 } 2283 return false; 2284 } 2285 @State editMenuOptions: EditMenuOptions = { 2286 onCreateMenu: this.onCreateMenu, onMenuItemClick: this.onMenuItemClick 2287 } 2288 2289 build() { 2290 Column() { 2291 TextInput({ text: this.text }) 2292 .width('95%') 2293 .height(50) 2294 .editMenuOptions(this.editMenuOptions) 2295 .margin({ top: 100 }) 2296 } 2297 .width("90%") 2298 .margin("5%") 2299 } 2300} 2301``` 2302 2303 2304 2305### 示例15（输入框支持输入状态变化等回调） 2306 2307该示例通过onEditChange、onCopy、onCut、onPaste、onContentScroll接口实现了输入框监测输入状态变化、复制、剪切、粘贴、文本内容滚动回调的效果。 2308 2309```ts 2310// xxx.ets 2311@Entry 2312@Component 2313struct TextInputExample { 2314 @State editStatus: boolean = false; 2315 @State copyValue: string = ""; 2316 @State cutValue: string = ""; 2317 @State pasteValue: string = ""; 2318 @State totalOffsetX: number = 0; 2319 @State totalOffsetY: number = 0; 2320 2321 build() { 2322 Row() { 2323 Column() { 2324 TextInput({ text: "TextInput支持输入状态变化时回调" }) 2325 .height(60) 2326 .fontStyle(FontStyle.Italic) 2327 .fontWeight(FontWeight.Bold) 2328 .fontFamily("HarmonyOS Sans") 2329 .copyOption(CopyOptions.LocalDevice) 2330 .textAlign(TextAlign.Center) 2331 .selectedBackgroundColor(Color.Blue) 2332 .caretStyle({ width: '4vp' }) 2333 .caretPosition(10)// 设置TextInput光标位置 2334 .selectionMenuHidden(true)// 设置TextInput不弹出系统文本选择菜单 2335 .onEditChange((status: boolean) => { 2336 this.editStatus = status; 2337 }) 2338 .defaultFocus(true)// 设置TextInput默认获焦 2339 .enableKeyboardOnFocus(false)// 设置TextInput通过点击以外的方式获焦时，不主动拉起软键盘 2340 .selectAll(false) 2341 2342 Text("editStatus:" + this.editStatus).height(30) 2343 2344 TextInput({ text: "TextInput支持复制操作时回调" }) 2345 .height(60) 2346 .fontStyle(FontStyle.Italic) 2347 .fontWeight(FontWeight.Bold) 2348 .fontFamily("HarmonyOS Sans") 2349 .copyOption(CopyOptions.LocalDevice) 2350 .textAlign(TextAlign.Center) 2351 .selectedBackgroundColor(Color.Blue) 2352 .caretStyle({ width: '4vp' }) 2353 .onCopy((copyValue: string) => { 2354 this.copyValue = copyValue; 2355 }) 2356 2357 Text("copyValue:" + this.copyValue).height(30) 2358 2359 TextInput({ text: "TextInput支持剪切操作时回调" }) 2360 .height(60) 2361 .fontStyle(FontStyle.Italic) 2362 .fontWeight(FontWeight.Bold) 2363 .fontFamily("HarmonyOS Sans") 2364 .copyOption(CopyOptions.LocalDevice) 2365 .textAlign(TextAlign.Center) 2366 .selectedBackgroundColor(Color.Blue) 2367 .caretStyle({ width: '4vp' }) 2368 .onCut((cutValue: string) => { 2369 this.cutValue = cutValue; 2370 }) 2371 2372 Text("cutValue:" + this.cutValue).height(30) 2373 2374 TextInput({ text: "TextInput支持粘贴操作时回调" }) 2375 .height(60) 2376 .fontStyle(FontStyle.Italic) 2377 .fontWeight(FontWeight.Bold) 2378 .fontFamily("HarmonyOS Sans") 2379 .copyOption(CopyOptions.LocalDevice) 2380 .textAlign(TextAlign.Center) 2381 .selectedBackgroundColor(Color.Blue) 2382 .caretStyle({ width: '4vp' }) 2383 .onPaste((pasteValue: string) => { 2384 this.pasteValue = pasteValue; 2385 }) 2386 2387 Text("pasteValue:" + this.pasteValue).height(30) 2388 2389 TextInput({ text: "TextInput支持文本内容滚动时回调: 文本内容宽度超出输入框宽度，滚动文本查看偏移量变化" }) 2390 .height(60) 2391 .fontStyle(FontStyle.Italic) 2392 .fontWeight(FontWeight.Bold) 2393 .fontFamily("HarmonyOS Sans") 2394 .copyOption(CopyOptions.LocalDevice) 2395 .textAlign(TextAlign.Center) 2396 .selectedBackgroundColor(Color.Blue) 2397 .caretStyle({ width: '4vp' }) 2398 .onContentScroll((totalOffsetX: number, totalOffsetY: number) => { 2399 this.totalOffsetX = totalOffsetX; 2400 this.totalOffsetY = totalOffsetY; 2401 }) 2402 2403 Text("totalOffsetX:" + this.totalOffsetX + " totalOffsetY:" + this.totalOffsetY).height(30) 2404 2405 }.width('100%') 2406 } 2407 .height('100%') 2408 } 2409} 2410``` 2411 2412 2413
