1# TextArea 2 3多行文本输入框组件,当输入的文本内容超过组件宽度时会自动换行显示。 4 5高度未设置时,组件无默认高度,自适应内容高度。宽度未设置时,默认撑满最大宽度。 6 7> **说明:** 8> 9> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 10 11 12## 子组件 13 14无 15 16 17## 接口 18 19TextArea(value?: TextAreaOptions) 20 21**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 22 23**系统能力:** SystemCapability.ArkUI.ArkUI.Full 24 25**参数:** 26 27| 参数名 | 类型 | 必填 | 说明 | 28| ----- | ----- | ---- | ---- | 29| value | [TextAreaOptions](#textareaoptions对象说明) | 否 | TextArea组件参数。 | 30 31## TextAreaOptions对象说明 32 33**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 34 35**系统能力:** SystemCapability.ArkUI.ArkUI.Full 36 37| 名称 | 类型 | 必填 | 说明 | 38| ---- | ----- | ---- | ---- | 39| placeholder | [ResourceStr](ts-types.md#resourcestr) | 否 | 设置无输入时的提示文本。输入内容后,提示文本不显示。<br/>仅设置placeholder属性时,手柄依然跟随拖动,手柄松开后光标停留在文字开头位置。 | 40| text | [ResourceStr](ts-types.md#resourcestr) | 否 | 设置输入框当前的文本内容。</br>建议通过onChange事件将状态变量与文本实时绑定,</br>避免组件刷新时TextArea中的文本内容异常。<br />从API version 10开始,该参数支持[$$](../../../quick-start/arkts-two-way-sync.md)双向绑定变量。 | 41| controller<sup>8+</sup> | [TextAreaController](#textareacontroller8) | 否 | 设置TextArea控制器。 | 42 43 44## 属性 45 46除支持[通用属性](ts-universal-attributes-size.md),还支持以下属性: 47 48> **说明:** 49> 50> [通用属性padding](ts-universal-attributes-size.md#padding)的默认值为:<br>{<br> top: '8vp',<br> right: '16vp',<br> bottom: '8vp',<br> left: '16vp'<br> } 51> 52> 从API version 11开始,多行输入框可设置.width('auto')使组件宽度自适应文本宽度,自适应时组件宽度受constraintSize属性以及父容器传递的最大最小宽度限制,其余使用方式参考[尺寸设置](ts-universal-attributes-size.md#属性)。 53 54### placeholderColor 55 56placeholderColor(value: ResourceColor) 57 58设置placeholder文本颜色。 59 60**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 61 62**系统能力:** SystemCapability.ArkUI.ArkUI.Full 63 64**参数:** 65 66| 参数名 | 类型 | 必填 | 说明 | 67| ------ | ------------------------------------------ | ---- | -------------------------------------------- | 68| value | [ResourceColor](ts-types.md#resourcecolor) | 是 | placeholder文本颜色。<br/>默认值:跟随主题。 | 69 70### placeholderFont 71 72placeholderFont(value: Font) 73 74设置placeholder文本样式,包括字体大小,字体粗细,字体族,字体风格。当前支持'HarmonyOS Sans'字体和[注册自定义字体](../js-apis-font.md)。 75 76**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 77 78**系统能力:** SystemCapability.ArkUI.ArkUI.Full 79 80**参数:** 81 82| 参数名 | 类型 | 必填 | 说明 | 83| ------ | ------------------------ | ---- | --------------------- | 84| value | [Font](ts-types.md#font) | 是 | placeholder文本样式。 | 85 86### textAlign 87 88textAlign(value: TextAlign) 89 90设置文本在输入框中的水平对齐方式。 91 92支持TextAlign.Start、TextAlign.Center和TextAlign.End。 93 94可通过[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效果相同,控制内容在底部。 95 96当textAlign属性设置为TextAlign.JUSTIFY时,最后一行文本不参与两端对齐,为水平对齐首部效果。 97 98从API version 11开始,textAlign可设置TextAlign.JUSTIFY 99 100**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 101 102**系统能力:** SystemCapability.ArkUI.ArkUI.Full 103 104**参数:** 105 106| 参数名 | 类型 | 必填 | 说明 | 107| ------ | ------------------------------------------- | ---- | ---------------------------------------------------------- | 108| value | [TextAlign](ts-appendix-enums.md#textalign) | 是 | 文本在输入框中的水平对齐方式。<br/>默认值:TextAlign.Start | 109 110### caretColor 111 112caretColor(value: ResourceColor) 113 114设置输入框光标颜色。 115 116**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 117 118**系统能力:** SystemCapability.ArkUI.ArkUI.Full 119 120**参数:** 121 122| 参数名 | 类型 | 必填 | 说明 | 123| ------ | ------------------------------------------ | ---- | -------------------------------------- | 124| value | [ResourceColor](ts-types.md#resourcecolor) | 是 | 输入框光标颜色。<br/>默认值:'#007DFF' | 125 126> **说明:** 127> 从API version 12开始,此接口支持设置文本手柄颜色,光标和文本手柄颜色保持一致。 128 129### fontColor 130 131fontColor(value: ResourceColor) 132 133设置字体颜色。 134 135**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 136 137**系统能力:** SystemCapability.ArkUI.ArkUI.Full 138 139**参数:** 140 141| 参数名 | 类型 | 必填 | 说明 | 142| ------ | ------------------------------------------ | ---- | ---------- | 143| value | [ResourceColor](ts-types.md#resourcecolor) | 是 | 字体颜色。 | 144 145### fontSize 146 147fontSize(value: Length) 148 149设置字体大小。 150 151**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 152 153**系统能力:** SystemCapability.ArkUI.ArkUI.Full 154 155**参数:** 156 157| 参数名 | 类型 | 必填 | 说明 | 158| ------ | ---------------------------- | ---- | ------------------------------------------------------------ | 159| value | [Length](ts-types.md#length) | 是 | 字体大小。fontSize为number类型时,使用fp单位。字体默认大小16fp。不支持设置百分比字符串。 | 160 161### fontStyle 162 163fontStyle(value: FontStyle) 164 165设置字体样式。 166 167**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 168 169**系统能力:** SystemCapability.ArkUI.ArkUI.Full 170 171**参数:** 172 173| 参数名 | 类型 | 必填 | 说明 | 174| ------ | ------------------------------------------- | ---- | --------------------------------------- | 175| value | [FontStyle](ts-appendix-enums.md#fontstyle) | 是 | 字体样式。<br/>默认值:FontStyle.Normal | 176 177### fontWeight 178 179fontWeight(value: number | FontWeight | string) 180 181设置文本的字体粗细,设置过大可能会在不同字体下有截断。 182 183**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 184 185**系统能力:** SystemCapability.ArkUI.ArkUI.Full 186 187**参数:** 188 189| 参数名 | 类型 | 必填 | 说明 | 190| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 191| 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 | 192 193### fontFamily 194 195fontFamily(value: ResourceStr) 196 197设置字体列表。 198 199**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 200 201**系统能力:** SystemCapability.ArkUI.ArkUI.Full 202 203**参数:** 204 205| 参数名 | 类型 | 必填 | 说明 | 206| ------ | -------------------------------------- | ---- | ------------------------------------------------------------ | 207| value | [ResourceStr](ts-types.md#resourcestr) | 是 | 字体列表。默认字体'HarmonyOS Sans'。<br>应用当前支持'HarmonyOS Sans'字体和[注册自定义字体](../js-apis-font.md)。<br>卡片当前仅支持'HarmonyOS Sans'字体。 | 208 209### inputFilter<sup>8+</sup> 210 211inputFilter(value: ResourceStr, error?: (value: string) => void) 212 213通过正则表达式设置输入过滤器。匹配表达式的输入允许显示,不匹配的输入将被过滤。仅支持单个字符匹配,不支持字符串匹配。 214 215**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 216 217**系统能力:** SystemCapability.ArkUI.ArkUI.Full 218 219**参数:** 220 221| 参数名 | 类型 | 必填 | 说明 | 222| ------ | -------------------------------------- | ---- | ---------------------------------- | 223| value | [ResourceStr](ts-types.md#resourcestr) | 是 | 正则表达式。 | 224| error | (value: string) => void | 否 | 正则匹配失败时,返回被过滤的内容。 | 225 226### copyOption<sup>9+</sup> 227 228copyOption(value: CopyOptions) 229 230设置输入的文本是否可复制。设置CopyOptions.None时,当前TextArea中的文字无法被复制或剪切,仅支持粘贴。 231 232设置CopyOptions.None时,不允许拖拽。 233 234**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 235 236**系统能力:** SystemCapability.ArkUI.ArkUI.Full 237 238**参数:** 239 240| 参数名 | 类型 | 必填 | 说明 | 241| ------ | ------------------------------------------------ | ---- | ------------------------------------------------------------ | 242| value | [CopyOptions](ts-appendix-enums.md#copyoptions9) | 是 | 输入的文本是否可复制。<br/>默认值:CopyOptions.LocalDevice,支持设备内复制。 | 243 244### maxLength<sup>10+</sup> 245 246maxLength(value: number) 247 248设置文本的最大输入字符数。默认不设置最大输入字符数限制。到达文本最大字符限制,将无法继续输入字符,同时边框变为红色。 249 250**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 251 252**系统能力:** SystemCapability.ArkUI.ArkUI.Full 253 254**参数:** 255 256| 参数名 | 类型 | 必填 | 说明 | 257| ------ | ------ | ---- | ---------------------- | 258| value | number | 是 | 文本的最大输入字符数。 | 259 260### showCounter<sup>10+</sup> 261 262showCounter(value: boolean, options?: InputCounterOptions) 263 264设置当通过InputCounterOptions输入的字符数超过阈值时显示计数器。 265 266参数value为true时,才能设置options,文本框开启计数下标功能,需要配合maxlength(设置最大字符限制)一起使用。字符计数器显示的效果是当前输入字符数/最大可输入字符数。 267 268当输入字符数大于最大字符数乘百分比值时,显示字符计数器。如果用户设置计数器时不设置InputCounterOptions,那么当前输入字符数达到最大字符数时,边框和计数器下标将变为红色。用户同时设置参数value为true和InputCounterOptions,当thresholdPercentage数值在有效区间内,且输入字符数超过最大字符数时,边框和计数器下标将变为红色,框体抖动。highlightBorder设置为false,则不显示红色边框,计数器默认显示红色边框。内联模式下字符计数器不显示。 269 270**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 271 272**系统能力:** SystemCapability.ArkUI.ArkUI.Full 273 274**参数:** 275 276| 参数名 | 类型 | 必填 | 说明 | 277| --------------------- | ------------------------------------------------------------ | ---- | ---------------- | 278| value | boolean | 是 | 是否显示计数器。 | 279| options<sup>11+</sup> | [InputCounterOptions](ts-types.md#inputcounteroptions11对象说明) | 否 | 计数器的百分比。 | 280 281### style<sup>10+</sup> 282 283style(value: TextContentStyle) 284 285设置文本框多态样式,内联输入风格只支持TextAreaType.Normal类型。 286 287**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 288 289**系统能力:** SystemCapability.ArkUI.ArkUI.Full 290 291**参数:** 292 293| 参数名 | 类型 | 必填 | 说明 | 294| ------ | ----------------------------------------------------------- | ---- | ----------------------------------------------------- | 295| value | [TextContentStyle](ts-appendix-enums.md#textcontentstyle10) | 是 | 文本框多态样式。<br/>默认值:TextContentStyle.DEFAULT | 296 297### enableKeyboardOnFocus<sup>10+</sup> 298 299enableKeyboardOnFocus(value: boolean) 300 301设置TextArea通过点击以外的方式获焦时,是否主动拉起软键盘。 302 303从API version 10开始,获焦默认绑定输入法。 304 305**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 306 307**系统能力:** SystemCapability.ArkUI.ArkUI.Full 308 309**参数:** 310 311| 参数名 | 类型 | 必填 | 说明 | 312| ------ | ------- | ---- | ----------------------------------------------------------- | 313| value | boolean | 是 | 通过点击以外的方式获焦时,是否主动拉起软键盘。<br/>默认值:true | 314 315### selectionMenuHidden<sup>10+</sup> 316 317selectionMenuHidden(value: boolean) 318 319设置是否不弹出系统文本选择菜单。 320 321**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 322 323**系统能力:** SystemCapability.ArkUI.ArkUI.Full 324 325**参数:** 326 327| 参数名 | 类型 | 必填 | 说明 | 328| ------ | ------- | ---- | ------------------------------------------------------------ | 329| value | boolean | 是 | 是否不弹出系统文本选择菜单。<br />设置为true时,单击输入框光标、长按输入框、双击输入框、三击输入框或者右键输入框,不弹出系统文本选择菜单。<br />设置为false时,弹出系统文本选择菜单。<br />默认值:false | 330 331### barState<sup>10+</sup> 332 333barState(value: BarState) 334 335设置输入框编辑态时滚动条的显示模式。 336 337**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 338 339**系统能力:** SystemCapability.ArkUI.ArkUI.Full 340 341**参数:** 342 343| 参数名 | 类型 | 必填 | 说明 | 344| ------ | ----------------------------------------- | ---- | ------------------------------------------------------------ | 345| value | [BarState](ts-appendix-enums.md#barstate) | 是 | 输入框编辑态时滚动条的显示模式。<br/>默认值:BarState.Auto | 346 347### maxLines<sup>10+</sup> 348 349maxLines(value: number) 350 351配置textOverflow一起使用时,maxlines为可显示行数,超出截断;未配置textOverflow时,内联模式获焦状态下内容超出maxlines时,文本可滚动显示,内联模式非获焦状态下不生效maxlines,非内联模式按行截断。 352 353**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 354 355**系统能力:** SystemCapability.ArkUI.ArkUI.Full 356 357**参数:** 358 359| 参数名 | 类型 | 必填 | 说明 | 360| ------ | ----------------------------------------- | ---- | ------------------------------------------------------------ | 361| value | number | 是 | 内联输入风格编辑态时文本可显示的最大行数。<br/>默认值:3,非内联模式下,默认值为+∞,不限制最大行数。 <br/>取值范围:(0, +∞) | 362 363### customKeyboard<sup>10+</sup> 364 365customKeyboard(value: CustomBuilder, options?: KeyboardOptions) 366 367设置自定义键盘。 368 369当设置自定义键盘时,输入框激活后不会打开系统输入法,而是加载指定的自定义组件。 370 371自定义键盘的高度可以通过自定义组件根节点的height属性设置,宽度不可设置,使用系统默认值。 372 373自定义键盘采用覆盖原始界面的方式呈现,当没有开启避让模式或者输入框不需要避让的场景不会对应用原始界面产生压缩或者上提。 374 375自定义键盘无法获取焦点,但是会拦截手势事件。 376 377默认在输入控件失去焦点时,关闭自定义键盘,开发者也可以通过[TextAreaController](#textareacontroller8).[stopEditing](#stopediting10)方法控制键盘关闭。 378 379如果设备支持拍摄输入,设置自定义键盘后,该输入框会不支持拍摄输入。 380 381**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 382 383**系统能力:** SystemCapability.ArkUI.ArkUI.Full 384 385**参数:** 386 387| 参数名 | 类型 | 必填 | 说明 | 388| --------------------- | ------------------------------------------- | ---- | ------------------------------------------------------------ | 389| value | [CustomBuilder](ts-types.md#custombuilder8) | 是 | 自定义键盘。<br/>**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 | 390| options<sup>12+</sup> | [KeyboardOptions](ts-basic-components-richeditor.md#keyboardoptions12) | 否 | 设置自定义键盘是否支持避让功能。 | 391 392### type<sup>11+</sup> 393 394type(value: TextAreaType) 395 396设置输入框类型。 397 398**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 399 400**系统能力:** SystemCapability.ArkUI.ArkUI.Full 401 402**参数:** 403 404| 参数名 | 类型 | 必填 | 说明 | 405| ------ | --------------------------------------- | ---- | -------------------------------------------- | 406| value | [TextAreaType](#textareatype11枚举说明) | 是 | 输入框类型。<br/>默认值:TextAreaType.Normal | 407 408### enterKeyType<sup>11+</sup> 409 410enterKeyType(value: EnterKeyType) 411 412设置输入法回车键类型。 413 414**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 415 416**系统能力:** SystemCapability.ArkUI.ArkUI.Full 417 418**参数:** 419 420| 参数名 | 类型 | 必填 | 说明 | 421| ------ | ------------------------------------------------ | ---- | ---------------------------------------------------- | 422| value | [EnterKeyType](ts-types.md#enterkeytype枚举说明) | 是 | 输入法回车键类型。<br/>默认值:EnterKeyType.NEW_LINE | 423 424### enableAutoFill<sup>12+</sup> 425 426enableAutoFill(value: boolean) 427 428设置是否启用自动填充。 429 430**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 431 432**系统能力:** SystemCapability.ArkUI.ArkUI.Full 433 434**参数:** 435 436| 参数名 | 类型 | 必填 | 说明 | 437| ------ | ------- | ---- | ------------------------------------------------------------ | 438| value | boolean | 是 | 是否启用自动填充。<br/>true表示启用,false表示不启用。<br/>默认值:true | 439 440### contentType<sup>12+</sup> 441 442contentType(contentType: ContentType) 443 444设置自动填充类型。 445 446**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 447 448**系统能力:** SystemCapability.ArkUI.ArkUI.Full 449 450**参数:** 451 452| 参数名 | 类型 | 必填 | 说明 | 453| ----------- | ------------------------------------- | ---- | -------------- | 454| contentType | [ContentType](#contenttype12枚举说明) | 是 | 自动填充类型。 | 455 456### lineHeight<sup>12+</sup> 457 458lineHeight(value: number | string | Resource) 459 460设置文本的文本行高,设置值不大于0时,不限制文本行高,自适应字体大小,number类型时单位为fp。 461 462**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 463 464**系统能力:** SystemCapability.ArkUI.ArkUI.Full 465 466**参数:** 467 468| 参数名 | 类型 | 必填 | 说明 | 469| ------ | ------------------------------------------------------------ | ---- | ---------------- | 470| value | number \| string \| [Resource](ts-types.md#resource) | 是 | 文本的文本行高。 | 471 472### decoration<sup>12+</sup> 473 474decoration(value: TextDecorationOptions) 475 476设置文本装饰线类型样式及其颜色。 477 478**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 479 480**系统能力:** SystemCapability.ArkUI.ArkUI.Full 481 482**参数:** 483 484| 参数名 | 类型 | 必填 | 说明 | 485| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 486| value | [TextDecorationOptions](ts-types.md#textdecorationoptions12对象说明) | 是 | 文本装饰线对象。<br />默认值:{<br/> type: TextDecorationType.None,<br/> color: Color.Black,<br/> style: TextDecorationStyle.SOLID <br/>} | 487 488### letterSpacing<sup>12+</sup> 489 490letterSpacing(value: number | string | Resource) 491 492设置文本字符间距。设置该值为百分比时,按默认值显示。设置该值为0时,按默认值显示。 493 494当取值为负值时,文字会发生压缩,负值过小时会将组件内容区大小压缩为0,导致无内容显示。 495 496**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 497 498**系统能力:** SystemCapability.ArkUI.ArkUI.Full 499 500**参数:** 501 502| 参数名 | 类型 | 必填 | 说明 | 503| ------ | -------------------------- | ---- | -------------- | 504| value | number \| string \| [Resource](ts-types.md#resource) | 是 | 文本字符间距。 | 505 506### fontFeature<sup>12+</sup> 507 508fontFeature(value: string) 509 510设置文字特性效果,比如数字等宽的特性。 511 512格式为:normal \| \<feature-tag-value\> 513 514\<feature-tag-value\>的格式为:\<string\> \[ \<integer\> \| on \| off ] 515 516\<feature-tag-value\>的个数可以有多个,中间用','隔开。 517 518例如,使用等宽数字的输入格式为:"ss01" on。 519 520**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 521 522**系统能力:** SystemCapability.ArkUI.ArkUI.Full 523 524**参数:** 525 526| 参数名 | 类型 | 必填 | 说明 | 527| ------ | ------ | ---- | -------------- | 528| value | string | 是 | 文字特性效果。 | 529 530Font Feature当前支持的属性见 [fontFeature属性列表](ts-basic-components-text.md#fontfeature12)。 531设置 Font Feature 属性,Font Feature 是 OpenType 字体的高级排版能力,如支持连字、数字等宽等特性,一般用在自定义字体中,其能力需要字体本身支持。 532更多 Font Feature 能力介绍可参考 https://www.w3.org/TR/css-fonts-3/#font-feature-settings-prop 和 https://sparanoid.com/lab/opentype-features/ 533### wordBreak<sup>12+</sup> 534 535wordBreak(value: WordBreak) 536 537设置文本断行规则。该属性对placeholder文本无效。 538 539**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 540 541**系统能力:** SystemCapability.ArkUI.ArkUI.Full 542 543**参数:** 544 545| 参数名 | 类型 | 必填 | 说明 | 546| ------ | --------------------------------------------- | ---- | --------------------------------------------- | 547| value | [WordBreak](ts-appendix-enums.md#wordbreak11) | 是 | 文本断行规则。 <br />默认值:WordBreak.BREAK_WORD | 548 549> **说明:** 550> 551> 组件不支持clip属性设置,设置该属性任意枚举值对组件文本截断无影响。 552 553### selectedBackgroundColor<sup>12+</sup> 554 555selectedBackgroundColor(value: ResourceColor) 556 557设置文本选中底板颜色。如果未设置不透明度,默认为20%不透明度。 558 559**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 560 561**系统能力:** SystemCapability.ArkUI.ArkUI.Full 562 563**参数:** 564 565| 参数名 | 类型 | 必填 | 说明 | 566| ------ | ------------------------------------------ | ---- | ------------------------------------------ | 567| value | [ResourceColor](ts-types.md#resourcecolor) | 是 | 文本选中底板颜色。<br/>默认为20%不透明度。 | 568 569### caretStyle<sup>12+</sup> 570 571caretStyle(value: CaretStyle) 572 573设置光标风格。 574 575**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 576 577**系统能力:** SystemCapability.ArkUI.ArkUI.Full 578 579**参数:** 580 581| 参数名 | 类型 | 必填 | 说明 | 582| ------ | ----------------------------------- | ---- | ------------ | 583| value | [CaretStyle](ts-text-common.md#caretstyle10) | 是 | 光标的风格。 | 584 585### textIndent<sup>12+</sup> 586 587textIndent(value: Dimension) 588 589设置首行文本缩进。 590 591**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 592 593**系统能力:** SystemCapability.ArkUI.ArkUI.Full 594 595**参数:** 596 597| 参数名 | 类型 | 必填 | 说明 | 598| ------ | ----------------------------------- | ---- | ---------------------------- | 599| value | [Dimension](ts-types.md#dimension10)| 是 | 首行文本缩进。<br/>默认值:0 | 600 601### textOverflow<sup>12+</sup> 602 603textOverflow(value: TextOverflow) 604 605设置文本超长时的显示方式。 606 607内联模式,主动配置textoverflow才会生效按maxline截断效果,不配置时,默认不截断。 608 609文本截断是按字截断。例如,英文以单词为最小单位进行截断,若需要以字母为单位进行截断,wordBreak属性可设置为WordBreak.BREAK_ALL。 610 611当overflow设置为TextOverflow.None、TextOverflow.Clip、TextOverflow.Ellipsis时,需配合maxLines使用,单独设置不生效。设置TextOverflow.None与TextOverflow.Clip效果一样。 612 613**卡片能力:** 该接口支持在ArkTS卡片中使用。 614 615**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 616 617**系统能力:** SystemCapability.ArkUI.ArkUI.Full 618 619**参数:** 620 621| 参数名 | 类型 | 必填 | 说明 | 622| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 623| value | [TextOverflow](ts-appendix-enums.md#textoverflow) | 是 | 文本超长时的显示方式。<br/>默认值:TextOverflow.Clip | 624 625> **说明:** 626> TextArea组件不支持设置TextOverflow.MARQUEE模式,当设置为TextOverflow.MARQUEE模式时 显示为TextOverflow.Clip 627 628### minFontSize<sup>12+</sup> 629 630minFontSize(value: number | string | Resource) 631 632设置文本最小显示字号。 633 634需配合[maxFontSize](#maxfontsize12)以及[maxLines](#maxlines10)或布局大小限制使用,单独设置不生效。 635 636自适应字号生效时,fontSize设置不生效。 637 638**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 639 640**系统能力:** SystemCapability.ArkUI.ArkUI.Full 641 642**参数:** 643 644| 参数名 | 类型 | 必填 | 说明 | 645| ------ | ------------------------------------------------------------ | ---- | ------------------ | 646| value | number \| string \| [Resource](ts-types.md#resource) | 是 | 文本最小显示字号。 | 647 648### maxFontSize<sup>12+</sup> 649 650maxFontSize(value: number | string | Resource) 651 652设置文本最大显示字号。 653 654需配合[minFontSize](#minfontsize12)以及[maxLines](#maxlines10)或布局大小限制使用,单独设置不生效。 655 656自适应字号生效时,fontSize设置不生效。 657 658**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 659 660**系统能力:** SystemCapability.ArkUI.ArkUI.Full 661 662**参数:** 663 664| 参数名 | 类型 | 必填 | 说明 | 665| ------ | ------------------------------------------------------------ | ---- | ------------------ | 666| value | number \| string \| [Resource](ts-types.md#resource) | 是 | 文本最大显示字号。 | 667 668### heightAdaptivePolicy<sup>12+</sup> 669 670heightAdaptivePolicy(value: TextHeightAdaptivePolicy) 671 672设置文本自适应高度的方式。 673 674当设置为TextHeightAdaptivePolicy.MAX_LINES_FIRST时,优先使用[maxLines](#maxlines10)属性来调整文本高度。如果使用maxLines属性的布局大小超过了布局约束,则尝试在[minFontSize](#minfontsize12)和[maxFontSize](#maxfontsize12)的范围内缩小字体以显示更多文本。 675组件设置为内联输入风格,编辑态与非编辑态存在字体大小不一致情况。 676 677当设置为TextHeightAdaptivePolicy.MIN_FONT_SIZE_FIRST时,优先使用minFontSize属性来调整文本高度。如果使用minFontSize属性可以将文本布局在一行中,则尝试在minFontSize和maxFontSize的范围内增大字体并使用最大可能的字体大小。 678 679当设置为TextHeightAdaptivePolicy.LAYOUT_CONSTRAINT_FIRST时,优先使用布局约束来调整文本高度。如果布局大小超过布局约束,则尝试在minFontSize和maxFontSize的范围内缩小字体以满足布局约束。 680 681**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 682 683**系统能力:** SystemCapability.ArkUI.ArkUI.Full 684 685**参数:** 686 687| 参数名 | 类型 | 必填 | 说明 | 688| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 689| value | [TextHeightAdaptivePolicy](ts-appendix-enums.md#textheightadaptivepolicy10) | 是 | 文本自适应高度的方式。<br/>默认值:TextHeightAdaptivePolicy.MAX_LINES_FIRST | 690 691### lineSpacing<sup>12+</sup> 692 693lineSpacing(value: LengthMetrics) 694 695设置文本的行间距,设置值不大于0时,取默认值0。 696 697**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 698 699**系统能力:** SystemCapability.ArkUI.ArkUI.Full 700 701**参数:** 702 703| 参数名 | 类型 | 必填 | 说明 | 704| ------ | ------------------------------------------------------------ | ---- | ---------------- | 705| value | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 是 | 文本的行间距。默认值:0 | 706 707### lineBreakStrategy<sup>12+</sup> 708 709lineBreakStrategy(strategy: LineBreakStrategy) 710 711设置折行规则。该属性在wordBreak不等于breakAll的时候生效,不支持连词符。 712 713**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 714 715**系统能力:** SystemCapability.ArkUI.ArkUI.Full 716 717**参数:** 718 719| 参数名 | 类型 | 必填 | 说明 | 720| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------- | 721| strategy | [LineBreakStrategy](ts-appendix-enums.md#linebreakstrategy12) | 是 | 文本的折行规则。 <br />默认值:LineBreakStrategy.GREEDY | 722 723### editMenuOptions<sup>12+</sup> 724 725editMenuOptions(editMenu: EditMenuOptions) 726 727设置自定义菜单扩展项,允许用户设置扩展项的文本内容、图标、回调方法。 728 729**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 730 731**系统能力:** SystemCapability.ArkUI.ArkUI.Full 732 733**参数:** 734 735| 参数名 | 类型 | 必填 | 说明 | 736| ------ | --------------------------------------------- | ---- | --------------------------------------------- | 737| editMenu | [EditMenuOptions](ts-text-common.md#editmenuoptions对象说明) | 是 | 扩展菜单选项。 | 738 739### enablePreviewText<sup>12+</sup> 740 741enablePreviewText(enable: boolean) 742 743设置是否开启输入预上屏。 744 745预上屏内容定义为文字暂存态,目前不支持文字拦截功能,因此不触发onWillInsert、onDidInsert、onWillDelete、onDidDelete回调。 746 747**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 748 749**系统能力:** SystemCapability.ArkUI.ArkUI.Full 750 751**参数:** 752 753| 参数名 | 类型 | 必填 | 说明 | 754| ------ | ------- | ---- | ---------------------------------- | 755| enable | boolean | 是 | 是否开启输入预上屏。<br/>默认值:true | 756 757> **说明:** 758> 759> 该接口在CAPI场景使用时下,默认关闭。可以在工程的module.json5中配置[metadata](../../../../application-dev/quick-start/module-structure.md#metadata对象内部结构)字段控制是否启用预上屏,配置如下: 760> ```json 761> "metadata": [ 762> { 763> "name": "can_preview_text", 764> "value": "true", 765> } 766> ] 767> ``` 768 769### enableHapticFeedback<sup>13+</sup> 770 771enableHapticFeedback(isEnabled: boolean) 772 773设置是否开启触控反馈。 774 775**原子化服务API:** 从API version 13开始,该接口支持在原子化服务中使用。 776 777**系统能力:** SystemCapability.ArkUI.ArkUI.Full 778 779**参数:** 780 781| 参数名 | 类型 | 必填 | 说明 | 782| ------ | ------- | ---- | ---------------------------------- | 783| isEnabled | boolean | 是 | 是否开启触控反馈。<br/>默认值:true | 784 785> **说明:** 786> 787> 开启触控反馈时,需要在工程的module.json5中配置requestPermissions字段开启振动权限,配置如下: 788> ```json 789> "requestPermissions": [ 790> { 791> "name": "ohos.permission.VIBRATE", 792> } 793> ] 794> ``` 795 796## 事件 797 798除支持[通用事件](ts-universal-events-click.md)外,还支持以下事件: 799 800### onChange 801 802onChange(callback: EditableTextOnChangeCallback) 803 804输入内容发生变化时,触发该回调。 805 806在本回调中,若执行了光标操作,需要开发者在预上屏场景下依据previewText参数调整光标逻辑,以适应预上屏场景。 807 808**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 809 810**系统能力:** SystemCapability.ArkUI.ArkUI.Full 811 812**参数:** 813 814| 参数名 | 类型 | 必填 | 说明 | 815| ------ | ------ | ---- | -------------------- | 816| callback | [EditableTextOnChangeCallback](ts-text-common.md#editabletextonchangecallback12) | 是 | 当前输入文本内容变化时的回调。 | 817 818### onEditChange<sup>10+</sup> 819 820onEditChange(callback: (isEditing: boolean) => void) 821 822输入状态变化时,触发该回调。有光标时为编辑态,无光标时为非编辑态。isEditing为true表示正在输入。 823 824**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 825 826**系统能力:** SystemCapability.ArkUI.ArkUI.Full 827 828**参数:** 829 830| 参数名 | 类型 | 必填 | 说明 | 831| --------- | ------- | ---- | -------------------- | 832| isEditing | boolean | 是 | 为true表示正在输入。 | 833 834### onCopy<sup>8+</sup> 835 836onCopy(callback: (value: string) => void) 837 838进行复制操作时,触发该回调。 839 840**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 841 842**系统能力:** SystemCapability.ArkUI.ArkUI.Full 843 844**参数:** 845 846| 参数名 | 类型 | 必填 | 说明 | 847| ------ | ------ | ---- | ---------------- | 848| value | string | 是 | 复制的文本内容。 | 849 850### onCut<sup>8+</sup> 851 852onCut(callback: (value: string) => void) 853 854进行剪切操作时,触发该回调。 855 856**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 857 858**系统能力:** SystemCapability.ArkUI.ArkUI.Full 859 860**参数:** 861 862| 参数名 | 类型 | 必填 | 说明 | 863| ------ | ------ | ---- | ---------------- | 864| value | string | 是 | 剪切的文本内容。 | 865 866### onPaste 867 868onPaste(callback: (value: string, event: PasteEvent) => void) 869 870进行粘贴操作时,触发该回调。 871 872**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 873 874**系统能力:** SystemCapability.ArkUI.ArkUI.Full 875 876**参数:** 877 878| 参数名 | 类型 | 必填 | 说明 | 879| ------------------- | ------------------------------------------------------------ | ---- | ---------------------- | 880| value | string | 是 | 粘贴的文本内容。 | 881| event<sup>11+</sup> | [PasteEvent](ts-basic-components-richeditor.md#pasteevent11) | 是 | 用户自定义的粘贴事件。 | 882 883### onTextSelectionChange<sup>10+</sup> 884 885onTextSelectionChange(callback: (selectionStart: number, selectionEnd: number) => void) 886 887文本选择的位置发生变化或编辑状态下光标位置发生变化时,触发该回调。 888 889**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 890 891**系统能力:** SystemCapability.ArkUI.ArkUI.Full 892 893**参数:** 894 895| 参数名 | 类型 | 必填 | 说明 | 896| -------------- | ------ | ---- | --------------------------------------- | 897| selectionStart | number | 是 | 所选文本的起始位置,文字的起始位置为0。 | 898| selectionEnd | number | 是 | 所选文本的结束位置。 | 899 900### onContentScroll<sup>10+</sup> 901 902onContentScroll(callback: (totalOffsetX: number, totalOffsetY: number) => void) 903 904文本内容滚动时,触发该回调。 905 906**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 907 908**系统能力:** SystemCapability.ArkUI.ArkUI.Full 909 910**参数:** 911 912| 参数名 | 类型 | 必填 | 说明 | 913| ------------ | ------ | ---- | ---------------------------------- | 914| totalOffsetX | number | 是 | 文本在内容区的横坐标偏移,单位px。 | 915| totalOffsetY | number | 是 | 文本在内容区的纵坐标偏移,单位px。 | 916 917### onSubmit<sup>11+</sup> 918 919onSubmit(callback: (enterKey: EnterKeyType) => void) 920 921按下输入法回车键触发该回调。 922 923**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 924 925**系统能力:** SystemCapability.ArkUI.ArkUI.Full 926 927**参数:** 928 929| 参数名 | 类型 | 必填 | 说明 | 930| -------- | ------------------------------------------------ | ---- | ------------------------------------------------------------ | 931| enterKey | [EnterKeyType](ts-types.md#enterkeytype枚举说明) | 是 | 输入法回车键类型,类型为EnterKeyType.NEW_LINE时不触发onSubmit。 | 932 933### onWillInsert<sup>12+</sup> 934 935onWillInsert(callback: Callback\<InsertValue, boolean>) 936 937在将要输入时,触发该回调。 938 939**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 940 941**系统能力:** SystemCapability.ArkUI.ArkUI.Full 942 943**参数:** 944 945| 参数名 | 类型 | 必填 | 说明 | 946| ------ | ------------------------------------------------------------ | ---- | ------------------ | 947| callback | Callback\<[InsertValue](ts-text-common.md#insertvalue12对象说明), boolean> | 是 | 在将要输入时调用的回调。<br/>在返回true时,表示正常插入,返回false时,表示不插入。<br/>在预上屏操作时,该回调不触发。<br/>仅支持系统输入法输入的场景。 | 948 949### onDidInsert<sup>12+</sup> 950 951onDidInsert(callback: Callback\<InsertValue>) 952 953在输入完成时,触发该回调。 954 955**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 956 957**系统能力:** SystemCapability.ArkUI.ArkUI.Full 958 959**参数:** 960 961| 参数名 | 类型 | 必填 | 说明 | 962| ------ | ------------------------------------------------------------ | ---- | ------------------ | 963| callback | Callback\<[InsertValue](ts-text-common.md#insertvalue12对象说明)> | 是 | 在输入完成时调用的回调。<br/>仅支持系统输入法输入的场景。 | 964 965### onWillDelete<sup>12+</sup> 966 967onWillDelete(callback: Callback\<DeleteValue, boolean>) 968 969在将要删除时,触发该回调。 970 971**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 972 973**系统能力:** SystemCapability.ArkUI.ArkUI.Full 974 975**参数:** 976 977| 参数名 | 类型 | 必填 | 说明 | 978| ------ | ------------------------------------------------------------ | ---- | ------------------ | 979| callback | Callback\<[DeleteValue](ts-text-common.md#deletevalue12对象说明), boolean> | 是 | 在将要删除时调用的回调。<br/>在返回true时,表示正常删除,返回false时,表示不删除。<br/>在预上屏删除操作时,该回调不触发。<br/>仅支持系统输入法输入的场景。 | 980 981### onDidDelete<sup>12+</sup> 982 983onDidDelete(callback: Callback\<DeleteValue>) 984 985在删除完成时,触发该回调。 986 987**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 988 989**系统能力:** SystemCapability.ArkUI.ArkUI.Full 990 991**参数:** 992 993| 参数名 | 类型 | 必填 | 说明 | 994| ------ | ------------------------------------------------------------ | ---- | ------------------ | 995| callback | Callback\<[DeleteValue](ts-text-common.md#deletevalue12对象说明)> | 是 | 在删除完成时调用的回调。<br/>仅支持系统输入法输入的场景。 | 996 997## TextAreaController<sup>8+</sup> 998 999TextArea组件的控制器继承自[TextContentControllerBase](ts-types.md#textcontentcontrollerbase10)。 1000 1001**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 1002 1003**系统能力:** SystemCapability.ArkUI.ArkUI.Full 1004 1005### 导入对象 1006 1007``` 1008controller: TextAreaController = new TextAreaController() 1009``` 1010 1011### constructor<sup>8+</sup> 1012 1013constructor() 1014 1015TextAreaController的构造函数。 1016 1017**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 1018 1019**系统能力:** SystemCapability.ArkUI.ArkUI.Full 1020 1021### caretPosition<sup>8+</sup> 1022 1023caretPosition(value: number): void 1024 1025设置输入光标的位置。 1026 1027**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 1028 1029**系统能力:** SystemCapability.ArkUI.ArkUI.Full 1030 1031**参数:** 1032 1033| 参数名 | 类型 | 必填 | 说明 | 1034| ------ | ---- | ---- | ---- | 1035| value | number | 是 | 从字符串开始到光标所在位置的字符长度。 | 1036 1037### setTextSelection<sup>10+</sup> 1038 1039setTextSelection(selectionStart: number, selectionEnd: number, options?: SelectionOptions): void 1040 1041组件在获焦状态下,调用该接口设置文本选择区域并高亮显示,且只有在selectionStart小于selectionEnd时,文字才会被选取、高亮显示。 1042 1043**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 1044 1045**系统能力:** SystemCapability.ArkUI.ArkUI.Full 1046 1047**参数:** 1048 1049| 参数名 | 类型 | 必填 | 说明 | 1050| ------ | ---- | ---- | ---- | 1051| selectionStart | number | 是 | 文本选择区域起始位置,文本框中文字的起始位置为0。<br/>当selectionStart小于0时、按照0处理;当selectionStart大于文字最大长度时、按照文字最大长度处理。<br/>**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 | 1052| selectionEnd | number | 是 | 文本选择区域结束位置。<br/>当selectionEnd小于0时、按照0处理;当selectionEnd大于文字最大长度时、按照文字最大长度处理。<br/>**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 | 1053| options<sup>12+</sup> | [SelectionOptions](ts-types.md#selectionoptions12对象说明) | 否 | 选中文字时的配置。<br />默认值:MenuPolicy.DEFAULT<br/>**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 | 1054 1055> **说明:** 1056> 1057> 如果selectionMenuHidden被赋值为true或设备为2in1时,即使options被赋值为MenuPolicy.SHOW,调用setTextSelection也不弹出菜单。 1058> 1059> 如果选中的文本含有emoji表情时,表情的起始位置包含在设置的文本选中区域内就会被选中。 1060 1061### stopEditing<sup>10+</sup> 1062 1063stopEditing(): void 1064 1065退出编辑态。 1066 1067**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。 1068 1069**系统能力:** SystemCapability.ArkUI.ArkUI.Full 1070 1071## TextAreaType<sup>11+</sup>枚举说明 1072 1073**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 1074 1075**系统能力:** SystemCapability.ArkUI.ArkUI.Full 1076 1077| 名称 | 值 | 说明 | 1078| ------ | ----- | ------ | 1079| NORMAL | 0 | 基本输入模式。<br/>支持输入数字、字母、下划线、空格、特殊字符。 | 1080| NUMBER | 2 | 纯数字输入模式。 | 1081| PHONE_NUMBER | 3 | 电话号码输入模式。<br/>支持输入数字、空格、+ 、-、*、#、(、),长度不限。 | 1082| EMAIL | 5 | 邮箱地址输入模式。<br/>支持数字,字母,下划线、小数点、!、#、$、%、&、'、*、+、-、/、=、?、^、`、\{、\|、\}、~,以及@字符(只能存在一个@字符)。 | 1083| NUMBER_DECIMAL<sup>12+</sup> | 12 | 带小数点的数字输入模式。<br/>支持数字,小数点(只能存在一个小数点)。| 1084| URL<sup>12+</sup> | 13 | 带URL的输入模式。 | 1085 1086## ContentType<sup>12+</sup>枚举说明 1087 1088自动填充类型。 1089 1090**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 1091 1092**系统能力:** SystemCapability.ArkUI.ArkUI.Full 1093 1094| 名称 | 值 | 说明 | 1095| -------------------------- | ---- | ------------------------------------------------------------ | 1096| USER_NAME | 0 | 【用户名】在已启用密码保险箱的情况下,支持用户名的自动保存和自动填充。 | 1097| PASSWORD | 1 | 【密码】在已启用密码保险箱的情况下,支持密码的自动保存和自动填充。 | 1098| NEW_PASSWORD | 2 | 【新密码】在已启用密码保险箱的情况下,支持自动生成新密码。 | 1099| FULL_STREET_ADDRESS | 3 | 【详细地址】在已启用情景化自动填充的情况下,支持详细地址的自动保存和自动填充。 | 1100| HOUSE_NUMBER | 4 | 【门牌号】在已启用情景化自动填充的情况下,支持门牌号的自动保存和自动填充。 | 1101| DISTRICT_ADDRESS | 5 | 【区/县】在已启用情景化自动填充的情况下,支持区/县的自动保存和自动填充。 | 1102| CITY_ADDRESS | 6 | 【市】在已启用情景化自动填充的情况下,支持市的自动保存和自动填充。 | 1103| PROVINCE_ADDRESS | 7 | 【省】在已启用情景化自动填充的情况下,支持省的自动保存和自动填充。 | 1104| COUNTRY_ADDRESS | 8 | 【国家】在已启用情景化自动填充的情况下,支持国家的自动保存和自动填充。 | 1105| PERSON_FULL_NAME | 9 | 【姓名】在已启用情景化自动填充的情况下,支持姓名的自动保存和自动填充。 | 1106| PERSON_LAST_NAME | 10 | 【姓氏】在已启用情景化自动填充的情况下,支持姓氏的自动保存和自动填充。 | 1107| PERSON_FIRST_NAME | 11 | 【名字】在已启用情景化自动填充的情况下,支持名字的自动保存和自动填充。 | 1108| PHONE_NUMBER | 12 | 【手机号码】在已启用情景化自动填充的情况下,支持手机号码的自动保存和自动填充。 | 1109| PHONE_COUNTRY_CODE | 13 | 【国家代码】在已启用情景化自动填充的情况下,支持国家代码的自动保存和自动填充。 | 1110| FULL_PHONE_NUMBER | 14 | 【包含国家代码的手机号码】在已启用情景化自动填充的情况下,支持包含国家代码的手机号码的自动保存和自动填充。 | 1111| EMAIL_ADDRESS | 15 | 【邮箱地址】在已启用情景化自动填充的情况下,支持邮箱地址的自动保存和自动填充。 | 1112| BANK_CARD_NUMBER | 16 | 【银行卡号】在已启用情景化自动填充的情况下,支持银行卡号的自动保存和自动填充。 | 1113| ID_CARD_NUMBER | 17 | 【身份证号】在已启用情景化自动填充的情况下,支持身份证号的自动保存和自动填充。 | 1114| NICKNAME | 23 | 【昵称】在已启用情景化自动填充的情况下,支持昵称的自动保存和自动填充。 | 1115| DETAIL_INFO_WITHOUT_STREET | 24 | 【无街道地址】在已启用情景化自动填充的情况下,支持无街道地址的自动保存和自动填充。 | 1116| FORMAT_ADDRESS | 25 | 【标准地址】在已启用情景化自动填充的情况下,支持标准地址的自动保存和自动填充。 | 1117 1118## 示例 1119 1120### 示例1 1121TextArea基本使用示例。 1122```ts 1123// xxx.ets 1124@Entry 1125@Component 1126struct TextAreaExample { 1127 @State text: string = '' 1128 @State positionInfo: CaretOffset = { index: 0, x: 0, y: 0 } 1129 controller: TextAreaController = new TextAreaController() 1130 1131 build() { 1132 Column() { 1133 TextArea({ 1134 text: this.text, 1135 placeholder: 'The text area can hold an unlimited amount of text. input your word...', 1136 controller: this.controller 1137 }) 1138 .placeholderFont({ size: 16, weight: 400 }) 1139 .width(336) 1140 .height(56) 1141 .margin(20) 1142 .fontSize(16) 1143 .fontColor('#182431') 1144 .backgroundColor('#FFFFFF') 1145 .onChange((value: string) => { 1146 this.text = value 1147 }) 1148 Text(this.text) 1149 Button('Set caretPosition 1') 1150 .backgroundColor('#007DFF') 1151 .margin(15) 1152 .onClick(() => { 1153 // 设置光标位置到第一个字符后 1154 this.controller.caretPosition(1) 1155 }) 1156 Button('Get CaretOffset') 1157 .backgroundColor('#007DFF') 1158 .margin(15) 1159 .onClick(() => { 1160 this.positionInfo = this.controller.getCaretOffset() 1161 }) 1162 }.width('100%').height('100%').backgroundColor('#F1F3F5') 1163 } 1164} 1165``` 1166 1167 1168 1169### 示例2 1170maxLength、showCounter属性接口使用示例。 1171```ts 1172// xxx.ets 1173@Entry 1174@Component 1175struct TextAreaExample { 1176 @State text: string = 'test' 1177 @State counterVisible: boolean = false 1178 @State maxNumber: number = -1 1179 controller: TextAreaController = new TextAreaController() 1180 1181 build() { 1182 Column() { 1183 TextArea({ 1184 text: this.text, 1185 placeholder: 'The text area can hold an unlimited amount of text. input your word...', 1186 controller: this.controller 1187 }) 1188 .placeholderFont({ size: 16, weight: 400 }) 1189 .width(336) 1190 .height(56) 1191 .margin(20) 1192 .fontSize(16) 1193 .fontColor('#182431') 1194 .maxLength(4) 1195 .showCounter(true) 1196 .backgroundColor('#FFFFFF') 1197 .onChange((value: string) => { 1198 this.text = value 1199 }) 1200 }.width('100%').height('100%').backgroundColor('#F1F3F5') 1201 } 1202} 1203``` 1204 1205 1206 1207 1208### 示例3 1209TextArea绑定自定义键盘使用示例。 1210```ts 1211// xxx.ets 1212@Entry 1213@Component 1214struct TextAreaExample { 1215 controller: TextAreaController = new TextAreaController() 1216 @State inputValue: string = "" 1217 1218 // 自定义键盘组件 1219 @Builder CustomKeyboardBuilder() { 1220 Column() { 1221 Button('x').onClick(() => { 1222 // 关闭自定义键盘 1223 this.controller.stopEditing() 1224 }) 1225 Grid() { 1226 ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'], (item: number | string) => { 1227 GridItem() { 1228 Button(item + "") 1229 .width(110).onClick(() => { 1230 this.inputValue += item 1231 }) 1232 } 1233 }) 1234 }.maxCount(3).columnsGap(10).rowsGap(10).padding(5) 1235 }.backgroundColor(Color.Gray) 1236 } 1237 1238 build() { 1239 Column() { 1240 TextArea({ controller: this.controller, text: this.inputValue}) 1241 // 绑定自定义键盘 1242 .customKeyboard(this.CustomKeyboardBuilder()).margin(10).border({ width: 1 }) 1243 .height(200) 1244 } 1245 } 1246} 1247``` 1248 1249 1250 1251### 示例4 1252TextArea计数器使用示例。 1253```ts 1254// xxx.ets 1255@Entry 1256@Component 1257struct TextAreaExample { 1258 @State text: string = '' 1259 controller: TextAreaController = new TextAreaController() 1260 1261 build() { 1262 Column() { 1263 TextArea({ text: this.text, controller: this.controller }) 1264 .placeholderFont({ size: 16, weight: 400 }) 1265 .width(336) 1266 .height(56) 1267 .maxLength(6) 1268 .showCounter(true, { thresholdPercentage: 50, highlightBorder: true }) 1269 //计数器显示效果为用户当前输入字符数/最大字符限制数。最大字符限制数通过maxLength()接口设置。 1270 //如果用户当前输入字符数达到最大字符限制乘50%(thresholdPercentage)。字符计数器显示。 1271 //用户设置highlightBorder为false时,配置取消红色边框。不设置此参数时,默认为true。 1272 .onChange((value: string) => { 1273 this.text = value 1274 }) 1275 }.width('100%').height('100%').backgroundColor('#F1F3F5') 1276 } 1277} 1278``` 1279 1280 1281 1282 1283### 示例5 1284enterKeyType属性接口使用示例。 1285```ts 1286// xxx.ets 1287@Entry 1288@Component 1289struct TextInputExample { 1290 @State text: string = '' 1291 @State enterTypes: Array<EnterKeyType> = 1292 [EnterKeyType.Go, EnterKeyType.Search, EnterKeyType.Send, EnterKeyType.Done, EnterKeyType.Next, 1293 EnterKeyType.PREVIOUS, EnterKeyType.NEW_LINE] 1294 @State index: number = 0 1295 1296 build() { 1297 Column({ space: 20 }) { 1298 TextArea({ placeholder: '请输入用户名', text: this.text }) 1299 .width(380) 1300 .enterKeyType(this.enterTypes[this.index]) 1301 .onChange((value: string) => { 1302 this.text = value 1303 }) 1304 .onSubmit((enterKey: EnterKeyType) => { 1305 console.log("trigger area onsubmit" + enterKey); 1306 }) 1307 Button('改变EnterKeyType').onClick(() => { 1308 this.index = (this.index + 1) % this.enterTypes.length; 1309 }) 1310 1311 }.width('100%') 1312 } 1313} 1314``` 1315 1316 1317 1318 1319### 示例6 1320示例展示设置不同wordBreak属性的TextArea样式。 1321 1322```ts 1323// xxx.ets 1324@Entry 1325@Component 1326struct TextAreaExample { 1327 build() { 1328 Column() { 1329 Text("属性WordBreakType为NORMAL的样式:").fontSize(16).fontColor(0xFF0000) 1330 TextArea({ 1331 text: 'This is set wordBreak to WordBreak text Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu.' 1332 }) 1333 .fontSize(16) 1334 .border({ width: 1 }) 1335 .wordBreak(WordBreak.NORMAL) 1336 Text("英文文本,属性WordBreakType为BREAK_ALL的样式:").fontSize(16).fontColor(0xFF0000) 1337 TextArea({ 1338 text: 'This is set wordBreak to WordBreak text Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu.' 1339 }) 1340 .fontSize(16) 1341 .border({ width: 1 }) 1342 .wordBreak(WordBreak.BREAK_ALL) 1343 Text("中文文本,属性WordBreakType为BREAK_ALL的样式:").fontSize(16).fontColor(0xFF0000) 1344 TextArea({ 1345 text: '多行文本输入框组件,当输入的文本内容超过组件宽度时会自动换行显示。\n高度未设置时,组件无默认高度,自适应内容高度。宽度未设置时,默认撑满最大宽度。' 1346 }) 1347 .fontSize(16) 1348 .border({ width: 1 }) 1349 .wordBreak(WordBreak.BREAK_ALL) 1350 Text("属性WordBreakType为BREAK_WORD的样式:").fontSize(16).fontColor(0xFF0000) 1351 TextArea({ 1352 text: 'This is set wordBreak to WordBreak text Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu.' 1353 }) 1354 .fontSize(16) 1355 .border({ width: 1 }) 1356 .wordBreak(WordBreak.BREAK_WORD) 1357 } 1358 } 1359} 1360``` 1361 1362 1363 1364### 示例7 1365 1366该示例实现了使用lineHeight设置文本的文本行高,使用letterSpacing设置文本字符间距,使用decoration设置文本装饰线样式。 1367 1368```ts 1369// xxx.ets 1370@Entry 1371@Component 1372struct TextAreaExample { 1373 build() { 1374 Row() { 1375 Column() { 1376 Text('lineHeight').fontSize(9).fontColor(0xCCCCCC) 1377 TextArea({text: 'lineHeight unset'}) 1378 .border({ width: 1 }).padding(10).margin(5) 1379 TextArea({text: 'lineHeight 15'}) 1380 .border({ width: 1 }).padding(10).margin(5).lineHeight(15) 1381 TextArea({text: 'lineHeight 30'}) 1382 .border({ width: 1 }).padding(10).margin(5).lineHeight(30) 1383 1384 Text('letterSpacing').fontSize(9).fontColor(0xCCCCCC) 1385 TextArea({text: 'letterSpacing 0'}) 1386 .border({ width: 1 }).padding(5).margin(5).letterSpacing(0) 1387 TextArea({text: 'letterSpacing 3'}) 1388 .border({ width: 1 }).padding(5).margin(5).letterSpacing(3) 1389 TextArea({text: 'letterSpacing -1'}) 1390 .border({ width: 1 }).padding(5).margin(5).letterSpacing(-1) 1391 1392 Text('decoration').fontSize(9).fontColor(0xCCCCCC) 1393 TextArea({text: 'LineThrough, Red\nsecond line'}) 1394 .border({ width: 1 }).padding(5).margin(5) 1395 .decoration({type: TextDecorationType.LineThrough, color: Color.Red}) 1396 TextArea({text: 'Overline, Red, DOTTED\nsecond line'}) 1397 .border({ width: 1 }).padding(5).margin(5) 1398 .decoration({type: TextDecorationType.Overline, color: Color.Red, style: TextDecorationStyle.DOTTED}) 1399 TextArea({text: 'Underline, Red, WAVY\nsecond line'}) 1400 .border({ width: 1 }).padding(5).margin(5) 1401 .decoration({type: TextDecorationType.Underline, color: Color.Red, style: TextDecorationStyle.WAVY}) 1402 }.height('90%') 1403 } 1404 .width('90%') 1405 .margin(10) 1406 } 1407} 1408``` 1409 1410 1411 1412### 示例8 1413fontFeature属性使用示例,对比了fontFeature使用ss01属性和不使用ss01属性的效果。 1414 1415```ts 1416@Entry 1417@Component 1418struct textArea { 1419 @State text1: string = 'This is ss01 on : 0123456789' 1420 @State text2: string = 'This is ss01 off: 0123456789' 1421 1422 build() { 1423 Column(){ 1424 TextArea({text: this.text1}) 1425 .fontSize(20) 1426 .margin({top:200}) 1427 .fontFeature("\"ss01\" on") 1428 TextArea({text : this.text2}) 1429 .margin({top:10}) 1430 .fontSize(20) 1431 .fontFeature("\"ss01\" off") 1432 } 1433 .width("90%") 1434 .margin("5%") 1435 } 1436} 1437``` 1438 1439 1440### 示例9 1441 1442自定义键盘弹出发生避让示例 1443 1444```ts 1445@Entry 1446@Component 1447struct TextAreaExample { 1448 controller: TextAreaController = new TextAreaController() 1449 @State inputValue: string = "" 1450 @State height1:string|number = '80%' 1451 @State height2:number = 100 1452 @State supportAvoidance:boolean = true; 1453 1454 // 自定义键盘组件 1455 @Builder CustomKeyboardBuilder() { 1456 Column() { 1457 Row(){ 1458 Button('x').onClick(() => { 1459 // 关闭自定义键盘 1460 this.controller.stopEditing() 1461 }).margin(10) 1462 } 1463 Grid() { 1464 ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'], (item: number | string) => { 1465 GridItem() { 1466 Button(item + "") 1467 .width(110).onClick(() => { 1468 this.inputValue += item 1469 }) 1470 } 1471 }) 1472 }.maxCount(3).columnsGap(10).rowsGap(10).padding(5) 1473 }.backgroundColor(Color.Gray) 1474 } 1475 1476 build() { 1477 Column() { 1478 Row(){ 1479 Button("20%") 1480 .fontSize(24) 1481 .onClick(()=>{ 1482 this.height1 = "20%" 1483 }) 1484 Button("80%") 1485 .fontSize(24) 1486 .margin({left:20}) 1487 .onClick(()=>{ 1488 this.height1 = "80%" 1489 }) 1490 } 1491 .justifyContent(FlexAlign.Center) 1492 .alignItems(VerticalAlign.Bottom) 1493 .height(this.height1) 1494 .width("100%") 1495 .padding({bottom:50}) 1496 TextArea({ controller: this.controller, text: this.inputValue}) 1497 .height(100) 1498 // 绑定自定义键盘 1499 .customKeyboard(this.CustomKeyboardBuilder(),{ supportAvoidance: this.supportAvoidance }).margin(10).border({ width: 1 }) 1500 // .height(200) 1501 } 1502 } 1503} 1504``` 1505 1506 1507### 示例10 1508 1509该示例实现了使用minFontSize,maxFontSize及heightAdaptivePolicy设置文本自适应字号。 1510 1511```ts 1512// xxx.ets 1513@Entry 1514@Component 1515struct TextAreaExample { 1516 build() { 1517 Row() { 1518 Column() { 1519 Text('heightAdaptivePolicy').fontSize(9).fontColor(0xCCCCCC) 1520 TextArea({text: 'This is the text with the height adaptive policy set'}) 1521 .width('80%').height(90).borderWidth(1).margin(1) 1522 .minFontSize(4) 1523 .maxFontSize(40) 1524 .maxLines(3) 1525 .heightAdaptivePolicy(TextHeightAdaptivePolicy.MAX_LINES_FIRST) 1526 TextArea({text: 'This is the text with the height adaptive policy set'}) 1527 .width('80%').height(90).borderWidth(1).margin(1) 1528 .minFontSize(4) 1529 .maxFontSize(40) 1530 .maxLines(3) 1531 .heightAdaptivePolicy(TextHeightAdaptivePolicy.MIN_FONT_SIZE_FIRST) 1532 TextArea({text: 'This is the text with the height adaptive policy set'}) 1533 .width('80%').height(90).borderWidth(1).margin(1) 1534 .minFontSize(4) 1535 .maxFontSize(40) 1536 .maxLines(3) 1537 .heightAdaptivePolicy(TextHeightAdaptivePolicy.LAYOUT_CONSTRAINT_FIRST) 1538 }.height('90%') 1539 } 1540 .width('90%') 1541 .margin(10) 1542 } 1543} 1544``` 1545 1546 1547 1548### 示例11 1549 1550lineSpacing使用示例,对比了不设置lineSpacing与lineSpacing设置不同单位的效果。 1551 1552```ts 1553import { LengthMetrics } from '@kit.ArkUI' 1554 1555@Entry 1556@Component 1557struct LineSpacingExample { 1558 build() { 1559 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { 1560 Text('TextArea lineSpacing.').fontSize(9).fontColor(0xCCCCCC) 1561 TextArea({ placeholder: 'This is the TextArea with no lineSpacing set.' }) 1562 .fontSize(12) 1563 TextArea({ placeholder: 'This is the TextArea with lineSpacing set to 20_px.' }) 1564 .fontSize(12) 1565 .lineSpacing(LengthMetrics.px(20)) 1566 TextArea({ placeholder: 'This is the TextArea with lineSpacing set to 20_vp.' }) 1567 .fontSize(12) 1568 .lineSpacing(LengthMetrics.vp(20)) 1569 TextArea({ placeholder: 'This is the TextArea with lineSpacing set to 20_fp.' }) 1570 .fontSize(12) 1571 .lineSpacing(LengthMetrics.fp(20)) 1572 TextArea({ placeholder: 'This is the TextArea with lineSpacing set to 20_lpx.' }) 1573 .fontSize(12) 1574 .lineSpacing(LengthMetrics.lpx(20)) 1575 TextArea({ placeholder: 'This is the TextArea with lineSpacing set to 100%.' }) 1576 .fontSize(12) 1577 .lineSpacing(LengthMetrics.percent(1)) 1578 }.height(600).width(350).padding({ left: 35, right: 35, top: 35 }) 1579 } 1580} 1581``` 1582 1583 1584 1585### 示例12 1586 1587自动填充示例 1588 1589```ts 1590// xxx.ets 1591@Entry 1592@Component 1593struct TextAreaExample { 1594 @State text: string = '' 1595 1596 build() { 1597 Column() { 1598 // 邮箱地址自动填充类型 1599 TextArea({ placeholder: 'input your email...' }) 1600 .width('95%') 1601 .height(40) 1602 .margin(20) 1603 .contentType(ContentType.EMAIL_ADDRESS) 1604 .enableAutoFill(true) 1605 .maxLength(20) 1606 // 街道地址自动填充类型 1607 TextArea({ placeholder: 'input your street address...' }) 1608 .width('95%') 1609 .height(40) 1610 .margin(20) 1611 .contentType(ContentType.FULL_STREET_ADDRESS) 1612 .enableAutoFill(true) 1613 .maxLength(20) 1614 }.width('100%').height('100%').backgroundColor('#F1F3F5') 1615 } 1616} 1617``` 1618 1619 1620 1621### 示例13 1622 1623lineBreakStrategy使用示例,展示了lineBreakStrategy设置不同挡位的效果。 1624 1625```ts 1626@Entry 1627@Component 1628struct TextAreaExample { 1629 @State message1: string = 1630 "They can be classified as built-in components–those directly provided by the ArkUI framework and custom components – those defined by developers" + 1631 "The built-in components include buttons radio buttonsprogress indicators and text You can set the rendering effectof thesecomponents in method chaining mode," + 1632 "page components are divided into independent UI units to implementindependent creation development and reuse of different units on pages making pages more engineering-oriented." 1633 @State lineBreakStrategyIndex: number = 0 1634 @State lineBreakStrategy: LineBreakStrategy[] = 1635 [LineBreakStrategy.GREEDY, LineBreakStrategy.HIGH_QUALITY, LineBreakStrategy.BALANCED] 1636 @State lineBreakStrategyStr: string[] = ['GREEDY', 'HIGH_QUALITY', 'BALANCED'] 1637 1638 build() { 1639 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start }) { 1640 Text('lineBreakStrategy').fontSize(9).fontColor(0xCCCCCC) 1641 TextArea({ text: this.message1 }) 1642 .fontSize(12) 1643 .border({ width: 1 }) 1644 .padding(10) 1645 .width('100%') 1646 .lineBreakStrategy(this.lineBreakStrategy[this.lineBreakStrategyIndex]) 1647 Row() { 1648 Button('当前lineBreakStrategy模式:' + this.lineBreakStrategyStr[this.lineBreakStrategyIndex]).onClick(() => { 1649 this.lineBreakStrategyIndex++ 1650 if (this.lineBreakStrategyIndex > (this.lineBreakStrategyStr.length - 1)) { 1651 this.lineBreakStrategyIndex = 0 1652 } 1653 }) 1654 }.padding({ top: 10 }) 1655 }.height(700).width(370).padding({ left: 35, right: 35, top: 35 }) 1656 } 1657} 1658``` 1659 1660 1661 1662### 示例14 1663 1664该示例展示输入框支持插入和删除回调。 1665 1666```ts 1667// xxx.ets 1668@Entry 1669@Component 1670struct TextAreaExample { 1671 @State insertValue: string = "" 1672 @State deleteValue: string = "" 1673 @State insertOffset: number = 0 1674 @State deleteOffset: number = 0 1675 @State deleteDirection: number = 0 1676 1677 build() { 1678 Row() { 1679 Column() { 1680 TextArea({ text: "TextArea支持插入回调文本" }) 1681 .width(300) 1682 .height(60) 1683 .onWillInsert((info: InsertValue) => { 1684 this.insertValue = info.insertValue 1685 return true; 1686 }) 1687 .onDidInsert((info: InsertValue) => { 1688 this.insertOffset = info.insertOffset 1689 }) 1690 1691 Text("insertValue:" + this.insertValue + " insertOffset:" + this.insertOffset).height(30) 1692 1693 TextArea({ text: "TextArea支持删除回调文本b" }) 1694 .width(300) 1695 .height(60) 1696 .onWillDelete((info: DeleteValue) => { 1697 this.deleteValue = info.deleteValue 1698 info.direction 1699 return true; 1700 }) 1701 .onDidDelete((info: DeleteValue) => { 1702 this.deleteOffset = info.deleteOffset 1703 this.deleteDirection = info.direction 1704 }) 1705 1706 Text("deleteValue:" + this.deleteValue + " deleteOffset:" + this.deleteOffset).height(30) 1707 Text("deleteDirection:" + (this.deleteDirection == 0 ? "BACKWARD" : "FORWARD")).height(30) 1708 1709 }.width('100%') 1710 } 1711 .height('100%') 1712 } 1713} 1714``` 1715 1716 1717 1718### 示例15 1719 1720editMenuOptions使用示例,展示设置自定义菜单扩展项的文本内容、图标、回调方法。 1721 1722```ts 1723// xxx.ets 1724@Entry 1725@Component 1726struct TextAreaExample { 1727 @State text: string = 'TextArea editMenuOptions' 1728 1729 onCreateMenu(menuItems: Array<TextMenuItem>) { 1730 menuItems.forEach((value, index) => { 1731 value.icon = $r('app.media.startIcon') 1732 if (value.id.equals(TextMenuItemId.COPY)) { 1733 value.content = "复制change" 1734 } 1735 if (value.id.equals(TextMenuItemId.SELECT_ALL)) { 1736 value.content = "全选change" 1737 } 1738 }) 1739 let item1: TextMenuItem = { 1740 content: 'custom1', 1741 icon: $r('app.media.startIcon'), 1742 id: TextMenuItemId.of('custom1'), 1743 } 1744 let item2: TextMenuItem = { 1745 content: 'custom2', 1746 id: TextMenuItemId.of('custom2'), 1747 icon: $r('app.media.startIcon'), 1748 } 1749 menuItems.push(item1) 1750 menuItems.unshift(item2) 1751 return menuItems 1752 } 1753 1754 build() { 1755 Column() { 1756 TextArea({ text: this.text }) 1757 .width('95%') 1758 .height(56) 1759 .editMenuOptions({ 1760 onCreateMenu: this.onCreateMenu, onMenuItemClick: (menuItem: TextMenuItem, textRange: TextRange) => { 1761 if (menuItem.id.equals(TextMenuItemId.of("custom2"))) { 1762 console.log("拦截 id: custom2 start:" + textRange.start + "; end:" + textRange.end) 1763 return true; 1764 } 1765 if (menuItem.id.equals(TextMenuItemId.COPY)) { 1766 console.log("拦截 COPY start:" + textRange.start + "; end:" + textRange.end) 1767 return true; 1768 } 1769 if (menuItem.id.equals(TextMenuItemId.SELECT_ALL)) { 1770 console.log("不拦截 SELECT_ALL start:" + textRange.start + "; end:" + textRange.end) 1771 return false; 1772 } 1773 return false; 1774 } 1775 }) 1776 .margin({ top: 100 }) 1777 } 1778 .width("90%") 1779 .margin("5%") 1780 } 1781} 1782``` 1783 1784 1785 1786