在鸿蒙中开发自定义编辑框，关键在于通过InputMethodController实现与输入法的深度交互。本文用最简代码带你掌握绑定、事件监听和独立编辑功能～

一、输入法绑定：建立编辑框与键盘的「连接」🔗

1. 核心方法：attach()

import { inputMethod } from '@ohos.ime';  

// 获取控制器实例  
private controller = inputMethod.getController();  

// 绑定输入法并显示键盘  
async bindIme() {  
  await this.controller.attach(true, {  
      inputAttribute: {  
            textInputType: inputMethod.TextInputType.TEXT, // 输入类型（文本/数字等）  
                  enterKeyType: inputMethod.EnterKeyType.DONE // 回车键样式  
                      }  
                        });  
                          this.controller.showKeyboard(); // 主动显示键盘  
                          }  
                          ```
### 2. 解绑与隐藏  
```typescript  
// 失去焦点时解绑  
async unbindIme() {  
  await this.controller.detach();  
    this.controller.hideKeyboard();  
    }  
    ```

## 二、事件监听：捕获输入「一举一动」🎚️  
### 1. 监听文本插入  
```typescript  
// 初始化时绑定事件  
this.controller.on('insertText', (text) => {  
  this.handleTextInsert(text); // 自定义文本处理逻辑  
  });  
// 示例：限制输入长度为20字  
private handleTextInsert(text: string) {  
  if (this.inputText.length < 20) {  
      this.inputText += text;  
        } else {  
            showToast('输入长度已达上限');  
              }  
              }  
              ```
### 2. 监听删除操作  
```typescript  
this.controller.on('deleteLeft', (length) => {  
  this.inputText = this.inputText.slice(0, -length); // 删除光标左侧字符  
  });  

3. 监听回车键

this.controller.on('keyEvent', (event) => {  
  if (event.keyCode === inputMethod.KeyCode.ENTER) {  
      this.onSubmit(); // 触发提交逻辑  
        }  
        });  
        ```

## 三、独立编辑功能：打造「智能」输入框🧠  
### 1. 光标控制  
```typescript  
// 移动光标到指定位置  
this.controller.setCursorPosition(5); // 移动到第5个字符后  

// 选中文本（从第3到第8个字符）  
this.controller.setSelection(3, 8);  

2. 文本格式化（示例：邮箱输入自动补全）

this.controller.on('insertText', (text) => {  
  if (!this.inputText.includes('@') && text === '@') {  
      this.inputText += 'example.com'; // 自动补全域名  
          this.controller.setCursorPosition(this.inputText.length); // 光标移至末尾  
            }  
            });  
            ```
### 3. 自定义键盘触发  
```typescript  
// 点击编辑框时显示自定义键盘  
@Entry  
@Component  
struct CustomInput {  
  @State inputText = '';  
  build() {  
      Column() {  
            TextInput(this.inputText)  
                    .onClick(() => {  
                              this.bindIme(); // 绑定输入法并显示键盘  
                                      })  
                                          }  
                                            }  
                                            }  
                                            ```

## 四、实战组件：完整自定义编辑框代码📄  
```typescript  
import { inputMethod } from '@ohos.ime';  

@Component  
struct CustomEditText {  
  @State text = '';  
    private controller = inputMethod.getController();  
  // 生命周期：创建时绑定事件  
    aboutToAppear() {  
        this.initIme();  
          }  
  private initIme() {  
      this.controller.on('insertText', (t) => this.text += t);  
          this.controller.on('deleteLeft', () => this.text = this.text.slice(0, -1));  
            }  
  build() {  
      Row() {  
            // 自定义编辑框样式  
                  Text(this.text)  
                          .padding(8)  
                                  .border({ width: 1, color: '#D0D0D0' })  
                                          .cornerRadius(4)  
                                                  .onClick(() => this.controller.showKeyboard()) // 点击唤起键盘  
      Button('清空')  
              .margin(8)  
                      .onClick(() => {  
                                this.text = '';  
                                          this.controller.deleteSurroundingText(this.text.length, 0); // 同步删除输入法缓存  
                                                  })  
                                                      }  
                                                        }  
                                                        }  
                                                        ```

## 五、优化技巧：提升交互「丝滑感」✨  
### 1. 键盘自动适配输入类型  
```typescript  
// 根据输入类型显示不同键盘（如数字键盘）  
async bindIme(type: inputMethod.TextInputType) {  
  await this.controller.attach(true, {  
      inputAttribute: { textInputType: type }  
        });  
        }  
// 使用示例：电话号码输入  
this.bindIme(inputMethod.TextInputType.PHONE);  

2. 防止重复绑定

private isAttached = false;  

async attachSafely() {  
  if (!this.isAttached) {  
      await this.controller.attach(true);  
          this.isAttached = true;  
            }  
            }  
            ```

## 总结：交互实现「三原则」  
1. **先绑后用**：必须通过`attach()`建立输入法连接  
2. 2. **事件驱动**：所有输入操作通过监听事件实现  
3. 3. **双向同步**：编辑框内容与输入法状态保持一致