OpenHarmony 实战开发 —— 在自绘编辑框中使用输入法

在输入法框架中,可以通过 getController 方法获取到 InputMethodController 实例来绑定输入法并监听输入法应用的各种操作,比如插入、删除、选择、光标移动等。这样就可以在自绘编辑框中使用输入法,并实现更加灵活和自由的编辑操作。

开发步骤

  1. 开发者在自绘编辑框使用输入法时,首先需要在DevEco Studio工程中新建一个ets文件,命名为自定义控件的名称,本示例中命名为CustomInput,在文件中定义一个自定义控件,并从@kit.IMEKit中导入inputMethod。
ts 复制代码
    import { inputMethod } from '@kit.IMEKit';

    @Component
    export struct CustomInput {
      build() {
      }
    }
  1. 在控件中,使用Text组件作为自绘编辑框的文本显示组件,使用状态变量inputText作为Text组件要显示的内容。
ts 复制代码
    import { inputMethod } from '@kit.IMEKit';

    @Component
    export struct CustomInput {
      @State inputText: string = ''; // inputText作为Text组件要显示的内容。

      build() {
        Text(this.inputText) // Text组件作为自绘编辑框的文本显示组件。
          .fontSize(16)
          .width('100%')
          .lineHeight(40)
          .id('customInput')
          .height(45)
          .border({ color: '#554455', radius: 30, width: 1 })
          .maxLines(1)
      }
    }

DD一下: 欢迎大家关注公众号<程序猿百晓生>,可以了解到以下知识点。

erlang 复制代码
`欢迎大家关注公众号<程序猿百晓生>,可以了解到以下知识点。`
1.OpenHarmony开发基础
2.OpenHarmony北向开发环境搭建
3.鸿蒙南向开发环境的搭建
4.鸿蒙生态应用开发白皮书V2.0 & V3.0
5.鸿蒙开发面试真题(含参考答案) 
6.TypeScript入门学习手册
7.OpenHarmony 经典面试题(含参考答案)
8.OpenHarmony设备开发入门【最新版】
9.沉浸式剖析OpenHarmony源代码
10.系统定制指南
11.【OpenHarmony】Uboot 驱动加载流程
12.OpenHarmony构建系统--GN与子系统、部件、模块详解
13.ohos开机init启动流程
14.鸿蒙版性能优化指南
.......
  1. 在控件中获取inputMethodController实例,并在文本点击时调用controller示例的attach方法绑定和拉起软键盘,并注册监听输入法插入文本、删除等方法,本示例仅展示插入、删除。
ts 复制代码
    import { inputMethod } from '@kit.IMEKit';

    @Component
    export struct CustomInput {
      @State inputText: string = ''; // inputText作为Text组件要显示的内容。
      private isAttach: boolean = false;
      private inputController: inputMethod.InputMethodController = inputMethod.getController();

      build() {
        Text(this.inputText) // Text组件作为自绘编辑框的文本显示组件。
          .fontSize(16)
          .width('100%')
          .lineHeight(40)
          .id('customInput')
          .onBlur(() => {
            this.off();
          })
          .height(45)
          .border({ color: '#554455', radius: 30, width: 1 })
          .maxLines(1)
          .onClick(() => {
            this.attachAndListener(); // 点击控件
          })
      }

      async attachAndListener() { // 绑定和设置监听
        focusControl.requestFocus('CustomInput');
        await this.inputController.attach(true, {
          inputAttribute: {
            textInputType: inputMethod.TextInputType.TEXT,
            enterKeyType: inputMethod.EnterKeyType.SEARCH
          }
        });
        if (!this.isAttach) {
          this.inputController.on('insertText', (text) => {
            this.inputText += text;
          })
          this.inputController.on('deleteLeft', (length) => {
            this.inputText = this.inputText.substring(0, this.inputText.length - length);
          })
          this.isAttach = true;
        }
      }

      off() {
        this.isAttach = false;
        this.inputController.off('insertText')
        this.inputController.off('deleteLeft')
      }
    }
  1. 在应用界面布局中引入该控件即可,此处假设使用界面为Index.ets和控件CustomInput.ets在同一目录下。
ts 复制代码
    import { CustomInput } from './CustomInput'; // 导入控件

    @Entry
    @Component
    struct Index {

      build() {
        Column() {
          CustomInput() // 使用控件
        }
      }
    }

示例效果图

相关推荐
zhanshuo14 分钟前
干掉复杂逻辑!手把手教你在鸿蒙系统中创建稳定的后台服务
harmonyos
zhanshuo14 分钟前
鸿蒙系统通知开发全攻略:实现跳转、自动消失、消息提醒的完整教程
harmonyos
问道飞鱼40 分钟前
【移动端知识】移动端多 WebView 互访方案:Android、iOS 与鸿蒙实现
android·ios·harmonyos·多webview互访
周胡杰2 小时前
鸿蒙加载预置数据库-关系型数据库-如何读取本地/预制数据库
数据库·华为·harmonyos·鸿蒙
迷曳12 小时前
27、鸿蒙Harmony Next开发:ArkTS并发(Promise和async/await和多线程并发TaskPool和Worker的使用)
前端·华为·多线程·harmonyos
沧海一笑-dj13 小时前
【嵌入式】51单片机学习笔记-Keil5软件安装教程
51单片机·嵌入式·keil·keil5·51·keil安装·keil5软件
迷曳16 小时前
24、鸿蒙Harmony Next开发:不依赖UI组件的全局自定义弹出框 (openCustomDialog)
dialog·前端·ui·harmonyos·鸿蒙
平谷一勺1 天前
鸿蒙状态栏操作
华为·harmonyos·沉浸式状态栏
Georgewu2 天前
【HarmonyOS组件/模板集成创新活动-如何高效开发鸿蒙应用 (鸿社圈子)】
harmonyos
前端世界2 天前
跨平台 App 如何无痛迁移到鸿蒙系统?全流程实战+Demo 教程
华为·harmonyos