| searchButton<sup>10+</sup> | value: string,<br>option?: [SearchButtonOption](#searchbuttonoption10) | Text on the search button located next to the search text box. By default, there is no search button. |
| searchButton<sup>10+</sup> | value: string,<br>option?: [SearchButtonOptions](#searchbuttonoptions10) | Text on the search button located next to the search text box. By default, there is no search button. |
| placeholderColor | [ResourceColor](ts-types.md#resourcecolor) | Placeholder text color. |
| placeholderColor | [ResourceColor](ts-types.md#resourcecolor) | Placeholder text color. |
| placeholderFont | [Font](ts-types.md#font) | Placeholder text style, including the font size, font width, font family, and font style. Currently, only the default font family is supported. |
| placeholderFont | [Font](ts-types.md#font) | Placeholder text style, including the font size, font width, font family, and font style. Currently, only the default font family is supported. |
| textFont | [Font](ts-types.md#font) | Style of the text entered in the search box, including the font size, font width, font family, and font style. Currently, only the default font family is supported. |
| textFont | [Font](ts-types.md#font) | Style of the text entered in the search box, including the font size, font width, font family, and font style. Currently, only the default font family is supported. |
...
@@ -56,7 +56,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
...
@@ -56,7 +56,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| width | [Length](ts-types.md#length) | No | Caret width.|
| width | [Length](ts-types.md#length) | No | Caret width.|
| color | [ResourceColor](ts-types.md#resourcecolor) | No | Caret color.|
| color | [ResourceColor](ts-types.md#resourcecolor) | No | Caret color.|
| placeholder | [ResourceStr](ts-types.md#resourcestr) | No | Placeholder text displayed when no text input is set.<br>When only the **placeholder** attribute is set, the text selection handle is still available; the caret stays at the beginning of the placeholder text when the handle is released. |
| placeholder | [ResourceStr](ts-types.md#resourcestr) | No | Text displayed when there is no input.<br>When only the **placeholder** attribute is set, the text selection handle is still available; the caret stays at the beginning of the placeholder text when the handle is released. |
| text | [ResourceStr](ts-types.md#resourcestr) | No | Current text input.<br>If the component has [stateStyles](ts-universal-attributes-polymorphic-style.md) or any other attribute that may trigger updating configured, you are advised to bind the state variable to the text in real time through the **onChange** event,<br>so as to prevent display errors when the component is updated.<br>Since API version 10, this parameter supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.|
| text | [ResourceStr](ts-types.md#resourcestr) | No | Current text input.<br>If the component has [stateStyles](ts-universal-attributes-polymorphic-style.md) or any other attribute that may trigger updating configured, you are advised to bind the state variable to the text in real time through the **onChange** event,<br>so as to prevent display errors when the component is updated.<br>Since API version 10, this parameter supports two-way binding through [$$](../../quick-start/arkts-two-way-sync.md).|
| controller<sup>8+</sup> | [TextAreaController](#textareacontroller8) | No | Text area controller.|
| controller<sup>8+</sup> | [TextAreaController](#textareacontroller8) | No | Text area controller.|
...
@@ -102,6 +102,48 @@ stopEditing(): void
...
@@ -102,6 +102,48 @@ stopEditing(): void
Exits the editing state.
Exits the editing state.
### getTextContentRect<sup>10+</sup>
getTextContentRect(): [RectResult](#rectresult10)
Obtains the position of the edited text area relative to the component and its size. The unit of the return value is pixel.
**Return value**
| Type | Description |
| ------------------- | -------- |
| [RectResult](#rectresult10) | Position of the edited text area relative to the component and its size.|
> **NOTE**
>
> - If no text is entered, the return value contains the position information, but the size is 0.
> - The position information is the offset of the first character relative to the editable area.
> - If there is input, the width in the return value is the fixed width of the editable area.
| placeholder | [ResourceStr](ts-types.md#resourcestr) | No | Placeholder text displayed when there is no input. |
| placeholder | [ResourceStr](ts-types.md#resourcestr) | No | Text displayed when there is no input. |
| text | [ResourceStr](ts-types.md#resourcestr) | No | Current text input.<br>If the component has [stateStyles](ts-universal-attributes-polymorphic-style.md) or any other attribute that may trigger updating configured, you are advised to bind the state variable to the text in real time through the **onChange** event, so as to prevent display errors when the component is updated.<br>Since API version 10, this parameter supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.|
| text | [ResourceStr](ts-types.md#resourcestr) | No | Current text input.<br>If the component has [stateStyles](ts-universal-attributes-polymorphic-style.md) or any other attribute that may trigger updating configured, you are advised to bind the state variable to the text in real time through the **onChange** event, so as to prevent display errors when the component is updated.<br>Since API version 10, this parameter supports two-way binding through [$$](../../quick-start/arkts-two-way-sync.md).|
| controller<sup>8+</sup> | [TextInputController](#textinputcontroller8) | No | Text input controller.|
| controller<sup>8+</sup> | [TextInputController](#textinputcontroller8) | No | Text input controller.|
...
@@ -54,7 +54,7 @@ Among the [universal attributes](ts-universal-attributes-size.md) and [universal
...
@@ -54,7 +54,7 @@ Among the [universal attributes](ts-universal-attributes-size.md) and [universal
> **NOTE**
> **NOTE**
>
>
> The default value of the universal attribute [padding](ts-universal-attributes-size.md) is as follows: { top: 8 vp, right: 16 vp, bottom: 8 vp, left: 16 vp }
> The default value of the universal attribute [padding](ts-universal-attributes-size.md) is as follows: <br>{<br> top: 8 vp,<br> right: 16 vp,<br> bottom: 8 vp,<br> left: 16 vp<br> }
## EnterKeyType
## EnterKeyType
...
@@ -96,7 +96,7 @@ In addition to the [universal events](ts-universal-events-click.md), the followi
...
@@ -96,7 +96,7 @@ In addition to the [universal events](ts-universal-events-click.md), the followi
| onChange(callback: (value: string) => void) | Triggered when the input changes.<br>**value**: text content.<br>This event is triggered when any of the following conditions is met:<br>1. Keyboard input is received.<br>2. Paste and cut is performed.<br>3. Ctrl+V is pressed.|
| onChange(callback: (value: string) => void) | Triggered when the input in the text box changes.<br>**value**: text content.<br>This event is triggered when any of the following conditions is met:<br>1. Keyboard input is received.<br>2. Paste and cut is performed.<br>3. Ctrl+V is pressed.|
| onSubmit(callback: (enterKey: EnterKeyType) => void) | Triggered when the Enter key on the keyboard is pressed. The return value is the current type of the Enter key.<br>**enterKeyType**: type of the Enter key. For details, see [EnterKeyType](#enterkeytype).|
| onSubmit(callback: (enterKey: EnterKeyType) => void) | Triggered when the Enter key on the keyboard is pressed. The return value is the current type of the Enter key.<br>**enterKeyType**: type of the Enter key. For details, see [EnterKeyType](#enterkeytype).|
| onEditChanged(callback: (isEditing: boolean) => void)<sup>(deprecated)</sup> | Triggered when the input status changes. Since API version 8, **onEditChange** is recommended.|
| onEditChanged(callback: (isEditing: boolean) => void)<sup>(deprecated)</sup> | Triggered when the input status changes. Since API version 8, **onEditChange** is recommended.|
| onEditChange(callback: (isEditing: boolean) => void)<sup>8+</sup> | Triggered when the input status changes. When the cursor is placed in the text box, it is in the editing state. Otherwise, it is in the non-editing state. If the value of **isEditing** is **true**, text input is in progress.|
| onEditChange(callback: (isEditing: boolean) => void)<sup>8+</sup> | Triggered when the input status changes. When the cursor is placed in the text box, it is in the editing state. Otherwise, it is in the non-editing state. If the value of **isEditing** is **true**, text input is in progress.|
...
@@ -135,8 +135,8 @@ Sets the text selection area, which will be highlighted.
...
@@ -135,8 +135,8 @@ Sets the text selection area, which will be highlighted.
## cl.arkui.1 Support for the undefined Parameter by Universal Events
Added support for passing **undefined** as a parameter for universal events (click, touch, show/hide, key, focus, mouse, and component area change events).
**Example**
```ts
// xxx.ets
@Entry
@Component
structExample{
build(){
Button("test")
.onClick(()=>{
console.log("click");
})
.onClick(undefined)
}
}
```
**Change Impact**
If the event callback parameter is **undefined**, the system will not respond to the configured event callback.
**Key API/Component Changes**
N/A
**Adaptation Guide**
If the event parameter is set to **undefined**, the event is disabled. Set the parameter based on the use case.
## cl.arkui.2 Initialization Requirement Change of @Prop/@BuilderParam Decorated Variables
**Example**
```ts
// xxx.ets
@Entry
@Component
structParent{
@Statemessage:string='Parent'
build(){
Column(){
Child()// Compile time error.
}
}
}
@Component
structChild{
@Propmessage:string
build(){
Column(){
}
}
}
```
**Change Impact**
If the @Prop or @BuilderParam decorated variable is not initialized locally or initialized from its parent component, a compile time error will occur.
**Key API/Component Changes**
N/A
**Adaptation Guide**
Assign an initial value to the @Prop or @BuilderParam decorated variable or pass the value from the parent component.
## cl.arkui.3 Initial Value Requirement Change of @BuilderParam Decorated Variables