diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/richEditorCustomKeyboard.png b/zh-cn/application-dev/reference/arkui-ts/figures/richEditorCustomKeyboard.png new file mode 100644 index 0000000000000000000000000000000000000000..bbaa41c203ba5e38ced3b00d498301dd46d222bd Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/richEditorCustomKeyboard.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/searchCustomKeyboard.png b/zh-cn/application-dev/reference/arkui-ts/figures/searchCustomKeyboard.png new file mode 100644 index 0000000000000000000000000000000000000000..ba8371fea6802dc1b216d7bd2141f4d720d63099 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/searchCustomKeyboard.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/textAreaCustomKeyboard.png b/zh-cn/application-dev/reference/arkui-ts/figures/textAreaCustomKeyboard.png new file mode 100644 index 0000000000000000000000000000000000000000..6f0e9d679a5c498ee54c6ceba8b2f3675706d9d2 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/textAreaCustomKeyboard.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/textInputCustomKeyboard.png b/zh-cn/application-dev/reference/arkui-ts/figures/textInputCustomKeyboard.png new file mode 100644 index 0000000000000000000000000000000000000000..716529aac87850e48b8befb630bfece0d2acb87d Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/textInputCustomKeyboard.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-richeditor.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-richeditor.md index 1c49339e8dd4360403ae19cad9ea9f51421add09..17657ad2dce4feda074eaec01edcccd25bb83f85 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-richeditor.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-richeditor.md @@ -31,6 +31,11 @@ RichEditor(value: RichEditorOptions) > > 其中clip属性默认值为true。 +| 名称 | 参数类型 | 描述 | +| ------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | +| customKeyboard10+ | [CustomBuilder](ts-types.md#custombuilder8) | 设置自定义键盘。
**说明:**
当设置自定义键盘时,输入框激活后不会打开系统输入法,而是加载指定的自定义组件。
自定义键盘的高度可以通过自定义组件根节点的height属性设置,宽度不可设置,使用系统默认值。
自定义键盘采用覆盖原始界面的方式呈现,不会对应用原始界面产生压缩或者上提。
自定义键盘无法获取焦点,但是会拦截手势事件。
默认在输入控件失去焦点时,关闭自定义键盘。 | + + ## 事件 除支持[通用事件](ts-universal-events-click.md)外,还支持以下事件: @@ -339,6 +344,8 @@ deleteSpans(value?: RichEditorRange): void ## 示例 +### 示例1 + ```ts // xxx.ets @Entry @@ -488,3 +495,47 @@ struct Index { } ``` ![richeditor](figures/richeditor.gif) + +### 示例2 + +```ts +// xxx.ets +@Entry +@Component +struct RichEditorExample { + controller: RichEditorController = new RichEditorController() + + // 自定义键盘组件 + @Builder CustomKeyboardBuilder() { + Column() { + Grid() { + ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'], (item) => { + GridItem() { + Button(item + "") + .width(110).onClick(() => { + this.controller.addTextSpan(item + '', { + style: + { + fontColor: Color.Orange, + fontSize: 30 + } + }) + }) + } + }) + }.maxCount(3).columnsGap(10).rowsGap(10).padding(5) + }.backgroundColor(Color.Gray) + } + + build() { + Column() { + RichEditor({ controller: this.controller }) + // 绑定自定义键盘 + .customKeyboard(this.CustomKeyboardBuilder()).margin(10).border({ width: 1 }) + .height(200) + } + } +} +``` + +![customKeyboard](figures/richEditorCustomKeyboard.png) \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-search.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-search.md index 70438299ccfda297a9f4f520c4b74864913f8d8d..eff4351ed5a512fa6fe149110db2e57a73a00e16 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-search.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-search.md @@ -41,6 +41,8 @@ Search(options?: { value?: string, placeholder?: ResourceStr, icon?: string, con | caretStyle10+ | [CaretStyle](#caretstyle10对象说明) | 设置光标样式。
默认值:
{
width:1.5vp
color:'#007DFF'
} | | enableKeyboardOnFocus10+ | boolean | Search获焦时,是否绑定输入法
默认值:true。从API version 10开始,获焦默认绑定输入法。 | | selectionMenuHidden10+ | boolean | 设置长按输入框或者右键输入框时,是否弹出文本选择菜单。
默认值:false | +| customKeyboard10+ | [CustomBuilder](ts-types.md#custombuilder8) | 设置自定义键盘。
**说明:**
当设置自定义键盘时,输入框激活后不会打开系统输入法,而是加载指定的自定义组件。
自定义键盘的高度可以通过自定义组件根节点的height属性设置,宽度不可设置,使用系统默认值。
自定义键盘采用覆盖原始界面的方式呈现,不会对应用原始界面产生压缩或者上提。
自定义键盘无法获取焦点,但是会拦截手势事件。
默认在输入控件失去焦点时,关闭自定义键盘,开发者也可以通过[stopEditing](#stopediting10)方法控制键盘关闭。 | + ## IconOptions10+对象说明 | 参数名 | 参数类型 | 必填 | 参数描述 | @@ -235,4 +237,47 @@ struct SearchButtoonExample { } ``` -![searchButton](figures/searchButton.gif) \ No newline at end of file +![searchButton](figures/searchButton.gif) + + +### 示例3 + +```ts +// xxx.ets +@Entry +@Component +struct SearchExample { + controller: SearchController = new SearchController() + @State inputValue: string = "" + + // 自定义键盘组件 + @Builder CustomKeyboardBuilder() { + Column() { + Button('x').onClick(() => { + // 关闭自定义键盘 + this.controller.stopEditing() + }) + Grid() { + ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'], (item) => { + GridItem() { + Button(item + "") + .width(110).onClick(() => { + this.inputValue += item + }) + } + }) + }.maxCount(3).columnsGap(10).rowsGap(10).padding(5) + }.backgroundColor(Color.Gray) + } + + build() { + Column() { + Search({ controller: this.controller, value: this.inputValue}) + // 绑定自定义键盘 + .customKeyboard(this.CustomKeyboardBuilder()).margin(10).border({ width: 1 }) + } + } +} +```` + +![customKeyboard](figures/searchCustomKeyboard.png) \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textarea.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textarea.md index 62816195d70832835372f204356618f9cc477fb7..80d85208af8cbcee4dc80fd5634a5cac8fdff7cd 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textarea.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textarea.md @@ -44,6 +44,7 @@ TextArea(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: Tex | selectionMenuHidden10+ | boolean | 设置长按输入框或者右键输入框时,是否弹出文本选择菜单。
默认值:false | | barState10+ | [BarState](ts-appendix-enums.md#BarState) | 设置内联输入风格编辑态时滚动条的显示模式。
默认值:BarState.Auto | | maxLines10+ | number | 设置内联输入风格编辑态时文本可显示的最大行数。
默认值:3 | +| customKeyboard10+ | [CustomBuilder](ts-types.md#custombuilder8) | 设置自定义键盘。
**说明:**
当设置自定义键盘时,输入框激活后不会打开系统输入法,而是加载指定的自定义组件。
自定义键盘的高度可以通过自定义组件根节点的height属性设置,宽度不可设置,使用系统默认值。
自定义键盘采用覆盖原始界面的方式呈现,不会对应用原始界面产生压缩或者上提。
自定义键盘无法获取焦点,但是会拦截手势事件。
默认在输入控件失去焦点时,关闭自定义键盘,开发者也可以通过[TextAreaController](#textareacontroller8).[stopEditing](#stopediting10)方法控制键盘关闭。 | > **说明:** > @@ -227,3 +228,47 @@ struct TextAreaExample { ``` ![maxLength](figures/maxLength.png) + + +### 示例3 + +```ts +// xxx.ets +@Entry +@Component +struct TextAreaExample { + controller: TextAreaController = new TextAreaController() + @State inputValue: string = "" + + // 自定义键盘组件 + @Builder CustomKeyboardBuilder() { + Column() { + Button('x').onClick(() => { + // 关闭自定义键盘 + this.controller.stopEditing() + }) + Grid() { + ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'], (item) => { + GridItem() { + Button(item + "") + .width(110).onClick(() => { + this.inputValue += item + }) + } + }) + }.maxCount(3).columnsGap(10).rowsGap(10).padding(5) + }.backgroundColor(Color.Gray) + } + + build() { + Column() { + TextArea({ controller: this.controller, text: this.inputValue}) + // 绑定自定义键盘 + .customKeyboard(this.CustomKeyboardBuilder()).margin(10).border({ width: 1 }) + .height(200) + } + } +} +``` + +![customKeyboard](figures/textAreaCustomKeyboard.png) \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md index 726ef22b1622189d5080f9ef4986328194e38f01..98a5cfe8133edb1e95c12b8ce474da598da797e3 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md @@ -45,7 +45,7 @@ TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: Te | selectedBackgroundColor10+ | [ResourceColor](ts-types.md#resourcecolor) | 设置文本选中底板颜色。
如果未设置透明度,默认为不透明(例如:“0x80000000”为50%透明度黑色)。 | | caretStyle10+ | {
width: [Length](ts-types.md#length)
} | 设置光标风格。 | | caretPosition10+ | number | 设置光标位置。 | -| showUnit10+ |  [CustomBuilder](ts-types.md#CustomBuilder8) | 设置控件作为文本框单位。
默认无单位。 | +| showUnit10+ | [CustomBuilder](ts-types.md#CustomBuilder8) | 设置控件作为文本框单位。
默认无单位。 | | showError10+ | string \| undefined | 设置错误状态下提示的错误文本或者不显示错误状态。
默认不显示错误状态。 | | showUnderline10+ | boolean | 设置是否开启下划线。
默认值:false | | passwordIcon10+ | [PasswordIcon](#passwordicon10对象说明) | 密码输入模式时,设置输入框末尾的图标。
默认为系统提供的密码图标。 | @@ -53,6 +53,7 @@ TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: Te | selectionMenuHidden10+ | boolean | 设置长按输入框或者右键输入框时,是否弹出文本选择菜单。
默认值:false | | barState10+ | [BarState](ts-appendix-enums.md#BarState) | 设置内联输入风格编辑态时滚动条的显示模式。
默认值:BarState.Auto | | maxLines10+ | number | 设置内联输入风格编辑态时文本可显示的最大行数。
默认值:3 | +| customKeyboard10+ | [CustomBuilder](ts-types.md#custombuilder8) | 设置自定义键盘。
**说明:**
当设置自定义键盘时,输入框激活后不会打开系统输入法,而是加载指定的自定义组件,针对系统键盘的enterKeyType属性设置将无效。
自定义键盘的高度可以通过自定义组件根节点的height属性设置,宽度不可设置,使用系统默认值。
自定义键盘采用覆盖原始界面的方式呈现,不会对应用原始界面产生压缩或者上提。
自定义键盘无法获取焦点,但是会拦截手势事件。
默认在输入控件失去焦点时,关闭自定义键盘,开发者也可以通过[TextInputController](#textinputcontroller8).[stopEditing](#stopediting10)方法控制键盘关闭。 | > **说明:** > @@ -296,3 +297,46 @@ struct TextInputExample { ``` ![showUnit](figures/showUnit.png) + +### 示例3 + +```ts +// xxx.ets +@Entry +@Component +struct TextInputExample { + controller: TextInputController = new TextInputController() + @State inputValue: string = "" + + // 自定义键盘组件 + @Builder CustomKeyboardBuilder() { + Column() { + Button('x').onClick(() => { + // 关闭自定义键盘 + this.controller.stopEditing() + }) + Grid() { + ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'], (item) => { + GridItem() { + Button(item + "") + .width(110).onClick(() => { + this.inputValue += item + }) + } + }) + }.maxCount(3).columnsGap(10).rowsGap(10).padding(5) + }.backgroundColor(Color.Gray) + } + + build() { + Column() { + TextInput({ controller: this.controller, text: this.inputValue }) + // 绑定自定义键盘 + .customKeyboard(this.CustomKeyboardBuilder()).margin(10).border({ width: 1 }) + } + } +} +``` + +![customKeyboard](figures/textInputCustomKeyboard.png) +