• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 在自绘编辑框中使用输入法
2<!--Kit: IME Kit-->
3<!--Subsystem: MiscServices-->
4<!--Owner: @illybyy-->
5<!--Designer: @andeszhang-->
6<!--Tester: @murphy1984-->
7<!--Adviser: @zhang_yixin13-->
8
9在输入法框架中，可以通过[getController](../reference/apis-ime-kit/js-apis-inputmethod.md#inputmethodgetcontroller9)方法获取到[InputMethodController](../reference/apis-ime-kit/js-apis-inputmethod.md#inputmethodcontroller)实例来绑定输入法并监听输入法应用的各种操作，比如插入、删除、选择、光标移动等。这样就可以在自绘编辑框中使用输入法，并实现更加灵活和自由的编辑操作。
10
11## 开发步骤
12
131. 开发者在自绘编辑框中使用输入法时，首先需要在DevEco Studio工程中新建一个ets文件，命名为自定义控件的名称，本示例中命名为CustomInput，在文件中定义一个自定义控件，并从@kit.IMEKit中导入inputMethod。
14
15   ```ets
16   import { inputMethod } from '@kit.IMEKit';
17
18   @Component
19   export struct CustomInput {
20     build() {
21     }
22   }
23   ```
24
252. 在控件中，使用Text组件作为自绘编辑框的文本显示组件，使用状态变量inputText作为Text组件要显示的内容。
26
27   ```ets
28   import { inputMethod } from '@kit.IMEKit';
29
30   @Component
31   export struct CustomInput {
32     @State inputText: string = ''; // inputText作为Text组件要显示的内容。
33
34     build() {
35       Text(this.inputText) // Text组件作为自绘编辑框的文本显示组件。
36         .fontSize(16)
37         .width('100%')
38         .lineHeight(40)
39         .id('customInput')
40         .height(45)
41         .border({ color: '#554455', radius: 30, width: 1 })
42         .maxLines(1)
43     }
44   }
45   ```
46
473. 在控件中获取inputMethodController实例，并在文本点击时调用controller示例的attach方法绑定和拉起软键盘，并注册监听输入法插入文本、删除等方法，本示例仅展示插入、删除。
48
49   ```ets
50   import { inputMethod } from '@kit.IMEKit';
51
52   @Component
53   export struct CustomInput {
54     @State inputText: string = ''; // inputText作为Text组件要显示的内容。
55     private isAttach: boolean = false;
56     private inputController: inputMethod.InputMethodController = inputMethod.getController();
57
58     build() {
59       Text(this.inputText) // Text组件作为自绘编辑框的文本显示组件。
60         .fontSize(16)
61         .width('100%')
62         .lineHeight(40)
63         .id('customInput')
64         .onBlur(() => {
65           this.off();
66         })
67         .height(45)
68         .border({ color: '#554455', radius: 30, width: 1 })
69         .maxLines(1)
70         .onClick(() => {
71           this.attachAndListener(); // 点击控件
72         })
73     }
74
75     async attachAndListener() { // 绑定和设置监听
76       focusControl.requestFocus('CustomInput');
77       try {
78        await this.inputController.attach(true, {
79         inputAttribute: {
80           textInputType: inputMethod.TextInputType.TEXT,
81           enterKeyType: inputMethod.EnterKeyType.SEARCH
82         }
83       });
84       } catch(err) {
85         console.error(`Failed to attach: code:${err.code}, message:${err.message}`);
86       }
87       if (!this.isAttach) {
88         this.inputController.on('insertText', (text) => {
89           this.inputText += text;
90         })
91         this.inputController.on('deleteLeft', (length) => {
92           this.inputText = this.inputText.substring(0, this.inputText.length - length);
93         })
94         this.isAttach = true;
95       }
96     }
97
98     off() {
99       this.isAttach = false;
100       this.inputController.off('insertText');
101       this.inputController.off('deleteLeft');
102     }
103   }
104   ```
105
1064. 在应用界面布局中引入该控件即可，此处假设使用界面为Index.ets和控件CustomInput.ets在同一目录下。
107
108   ```ets
109   import { CustomInput } from './CustomInput'; // 导入控件
110
111   @Entry
112   @Component
113   struct Index {
114
115     build() {
116       Column() {
117         CustomInput() // 使用控件
118       }
119     }
120   }
121   ```
122
123   ## 示例效果图
124  ![示例效果图](./figures/image-1.png)