diff --git a/zh-cn/application-dev/ui/Readme-CN.md b/zh-cn/application-dev/ui/Readme-CN.md index 13210d677636ddc478d81aec25587aeb1635e8d6..41431f5ae6f89f53c29db92195cbb3c404bc4d81 100755 --- a/zh-cn/application-dev/ui/Readme-CN.md +++ b/zh-cn/application-dev/ui/Readme-CN.md @@ -117,6 +117,7 @@ - [图标小符号 (SymbolGlyph/SymbolSpan)](arkts-common-components-symbol.md) - [属性字符串 (StyledString/MutableStyledString)](arkts-styled-string.md) - [图文混排](arkts-text-image-layout.md) + - [管理输入法软键盘](arkts-manage-keyboard.md) - 使用弹窗 - [弹窗概述](arkts-dialog-overview.md) - 使用弹出框 (Dialog) diff --git a/zh-cn/application-dev/ui/arkts-manage-keyboard.md b/zh-cn/application-dev/ui/arkts-manage-keyboard.md new file mode 100644 index 0000000000000000000000000000000000000000..6c87cd2fc2be0a37eba4ed232722266fa5e3a457 --- /dev/null +++ b/zh-cn/application-dev/ui/arkts-manage-keyboard.md @@ -0,0 +1,118 @@ +# 输入法软键盘在输入组件中的行为与管理 + +输入法软键盘显示在屏幕上,支持鼠标点击或触摸输入,提供类似物理键盘的使用体验。 + +本文介绍在使用系统原生输入组件([TextInput](../reference/apis-arkui/arkui-ts/ts-basic-components-textinput.md)、[TextArea](../reference/apis-arkui/arkui-ts/ts-basic-components-textarea.md)、[Search](../reference/apis-arkui/arkui-ts/ts-basic-components-search.md)、[RichEditor](../reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md))时,输入法软键盘的拉起、收起的典型场景及管理软键盘的方法。 + +## 拉起输入法软键盘 +1. 当焦点转移到输入框(如[TextInput](../reference/apis-arkui/arkui-ts/ts-basic-components-textinput.md))上且其`enableKeyboardOnFocus`属性不为`false`时,软键盘将被自动拉起。 + 以下示例代码,点击按钮,焦点移动到输入框上,软键盘被自动拉起。 + + ``` ets + // xxx.ets + @Entry + @Component + struct TextInputExample { + controller: TextInputController = new TextInputController(); + @State inputValue: string = ""; + + build() { + Column() { + Button('textinput get focus').onClick(() => { + this.getUIContext().getFocusController().requestFocus("textinput") + }) + TextInput({ controller: this.controller, text: this.inputValue }) + .id("textinput") + } + } + } + ``` + +![](figures/getFocus.gif) + +2. 单击、双击或长按输入框,软键盘将被拉起。 + +![](figures/click.gif) + +## 收起输入法软键盘 +1. 输入框接收到了侧滑手势。 +2. 页面发生切换。 +3. 焦点从输入框切换到了一个不需要软键盘的组件上。 + + 输入框失焦不会导致输入法关闭,下一个获焦组件将决定是否关闭输入法。 + 以下示例代码,点击按钮,焦点由输入框移动到button上,输入法关闭。 + ``` ets + // xxx.ets + @Entry + @Component + struct TextInputExample { + controller: TextInputController = new TextInputController(); + @State inputValue: string = ""; + + build() { + Column() { + Button('change focus').onClick(() => { + this.getUIContext().getFocusController().requestFocus("button") + }).id("button") + TextInput({ controller: this.controller, text: this.inputValue }) + } + } + } + ``` + +![](figures/changeFocus.gif) + +4. 拖拽文本,文本浮起后移动,随后软键盘自动收起。 + +![](figures/drag.gif) +## 管理输入法软键盘 +为了满足用户交互需要,开发者有时需要主动管理软键盘的弹出和收起。下面介绍几种常用的管理软键盘的方法。 +### 设置空的自定义键盘配置以防止输入法软键盘弹出 +如下示例代码所示,TextInput组件设置了空的自定义键盘,因此无论点击还是获焦都无法弹出输入法软键盘。 +``` ets +// xxx.ets +@Entry +@Component +struct TextInputExample { + controller: TextInputController = new TextInputController(); + @State inputValue: string = ""; + + // 自定义键盘组件 + @Builder + CustomKeyboardBuilder() { + Column() { + } + } + + build() { + Column() { + TextInput({ controller: this.controller, text: this.inputValue })// 绑定自定义键盘 + .customKeyboard(this.CustomKeyboardBuilder()) + } + } +} +``` +### 使用stopEditing关闭拉起的软键盘 +如下示例代码所示,点击按钮后,软键盘将收起。 +``` ets +// xxx.ets +@Entry +@Component +struct TextInputExample { + controller: TextInputController = new TextInputController(); + @State inputValue: string = ""; + + build() { + Column() { + Button('close keyboard').onClick(() => { + this.controller.stopEditing() + }) + TextInput({ controller: this.controller, text: this.inputValue }) + } + } +} +``` +![](figures/stopEditing.gif) + + + diff --git a/zh-cn/application-dev/ui/figures/changeFocus.gif b/zh-cn/application-dev/ui/figures/changeFocus.gif new file mode 100644 index 0000000000000000000000000000000000000000..5cfed7ba808f12a1646aeb1b71472b4e09e9117b Binary files /dev/null and b/zh-cn/application-dev/ui/figures/changeFocus.gif differ diff --git a/zh-cn/application-dev/ui/figures/click.gif b/zh-cn/application-dev/ui/figures/click.gif new file mode 100644 index 0000000000000000000000000000000000000000..696721db27dcc966a5da1982bf13fc575a78b05f Binary files /dev/null and b/zh-cn/application-dev/ui/figures/click.gif differ diff --git a/zh-cn/application-dev/ui/figures/drag.gif b/zh-cn/application-dev/ui/figures/drag.gif new file mode 100644 index 0000000000000000000000000000000000000000..fde43ca5b3be77468fcf2cff03aee80361bd466e Binary files /dev/null and b/zh-cn/application-dev/ui/figures/drag.gif differ diff --git a/zh-cn/application-dev/ui/figures/getFocus.gif b/zh-cn/application-dev/ui/figures/getFocus.gif new file mode 100644 index 0000000000000000000000000000000000000000..53493d1ba9f07342f42e8fe25617fa9fbeb9bc99 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/getFocus.gif differ diff --git a/zh-cn/application-dev/ui/figures/stopEditing.gif b/zh-cn/application-dev/ui/figures/stopEditing.gif new file mode 100644 index 0000000000000000000000000000000000000000..94e99a798db5a53282f5c8ec998e40c8e08a2578 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/stopEditing.gif differ