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