Custom Edit Box Development Guide: Implementing Interaction in HarmonyOS Input Methods

This article aims to deeply explore the technical details of Huawei HarmonyOS Next system (up to API 12 as of now), and is summarized based on actual development practices.
Mainly serving as a carrier for technical sharing and exchange, it is inevitable that there may be errors and omissions. We welcome valuable opinions and questions from colleagues to make progress together.
This article is original content. Any form of reprint must indicate the source and original author.

In traditional application development, the input function of edit boxes often relies on the default input method provided by the system. However, with the increasing demand of users and the diversification of application scenarios, the default input method often cannot meet personalized input needs. HarmonyOS's IME Kit provides developers with the InputMethodController component, which can easily realize the interaction between custom edit boxes and input methods, creating a more flexible and free input experience. This article will deeply explore the functions of InputMethodController in IME Kit and introduce how to implement the interaction between custom edit boxes and input methods, helping you build a custom edit box with rich functions.

Interaction mode between custom edit box and input method

The interaction mode between custom edit box and input method is mainly divided into the following steps:

1. Input method binding: Use the attach() method of InputMethodController to bind the input method to the custom edit box.
2. Show keyboard: After binding the input method, you can use the showKeyboard() method of InputMethodController to show the keyboard.
3. Listen for interaction events: Listen for events of InputMethodController, such as insertText, deleteLeft, moveCursor, etc., so as to perform corresponding processing when the user inputs.
4. Unbind input method: When the user no longer needs to input, use the detach() method of InputMethodController to unbind the input method and hide the keyboard.

Functions of InputMethodController

InputMethodController provides rich APIs for implementing the interaction between custom edit boxes and input methods, including:

• attach(): Bind the input method and show the keyboard.
• detach(): Unbind the input method and hide the keyboard.
• showKeyboard(): Show the keyboard.
• hideKeyboard(): Hide the keyboard.
• on(): Listen for input method events.
• off(): Cancel listening for input method events.

Input method binding and interaction event listening

1. Use the attach method to bind the input method and show the keyboard
Use the attach() method to bind the input method to the custom edit box and set input properties, such as input type, enter key type, etc.

Sample code:

import { inputMethod } from '@kit.IMEKit';
private inputController: inputMethod.InputMethodController = inputMethod.getController();
async attachAndListener() { // Binding and setting up listening
    focusControl.requestFocus('CustomInput'); // Get focus
    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; // Insert text
        })
        this.inputController.on('deleteLeft', (length) => {
            this.inputText = this.inputText.substring(0, this.inputText.length - length); // Delete text
        })
        this.isAttach = true;
    }
}

2. Listen for operations such as insertText and deleteLeft
Listen for events such as insertText and deleteLeft of InputMethodController so as to perform corresponding processing when the user inputs, such as updating the display content of the edit box.

Sample code:

private inputController: inputMethod.InputMethodController = inputMethod.getController();
inputController.on('insertText', (text) => {
    this.inputText += text; // Insert text
})
inputController.on('deleteLeft', (length) => {
    this.inputText = this.inputText.substring(0, this.inputText.length - length); // Delete text
})

Implementing independent editing functions of the input box

In addition to interacting with the input method, the custom edit box also needs to implement some independent editing functions, such as:

• Manage display content through state variables: Use state variables to store the display content of the edit box and update the state variables when the user inputs or performs other operations.
• Customize cursor movement and text selection functions: Use the APIs of InputMethodController to implement cursor movement and text selection functions.

Sample code: Creation of custom edit box component and implementation of input method interaction events

import { inputMethod } from '@kit.IMEKit';
@Component
export struct CustomInput {
    @State inputText: string = ''; // inputText serves as the content to be displayed by the Text component.
    build() {
        Text(this.inputText) // The Text component serves as the text display component of the custom-drawn edit box.
           .fontSize(16)
           .width('100%')
           .lineHeight(40)
           .id('customInput')
           .height(45)
           .border({ color: '#554455', radius: 30, width: 1 })
           .maxLines(1)
           .onClick(() => {
                this.attachAndListener(); // Click the control
            })
    }
    private isAttach: boolean = false;
    private inputController: inputMethod.InputMethodController = inputMethod.getController();
    async attachAndListener() { // Binding and setting up listening
        focusControl.requestFocus('CustomInput'); // Get focus
        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; // Insert text
            })
            this.inputController.on('deleteLeft', (length) => {
                this.inputText = this.inputText.substring(0, this.inputText.length - length); // Delete text
            })
            this.isAttach = true;
        }
    }
    off() {
        this.isAttach = false;
        this.inputController.off('insertText')
        this.inputController.off('deleteLeft')
    }
}

Summary

The InputMethodController component of IME Kit provides our developers with powerful interaction capabilities between custom edit boxes and input methods, which can help developers build a more flexible and free input experience. This article introduced the functions of InputMethodController, input method binding and interaction event listening, and implementing independent editing functions of the input box, helping you build a custom edit box with rich functions.

Next steps for thinking:

• Implement more functions of custom edit boxes, such as text formatting, emoticon input, voice input, etc.
• Optimize the interface and user experience of custom edit boxes.
• Apply custom edit boxes to different application scenarios, such as chat applications, note-taking applications, games, etc.