How to resolve the error of obtaining text before the cursor ?

Read the original article：How to resolve the error of obtaining text before the cursor ?

How to resolve the error of obtaining text before the cursor ?

Problem Description

New Operation: Display a letter on the screen: 'a', then retrieve the text before the cursor. The retrieved value is empty, but the expected value is 'a'. Then display another 'a' on the screen. At this point, the input box contains 'aa', and the text before the cursor is 'a', but the expected value is 'aa'.
Deletion Operation: At this point, the input box contains 'aaa'. Clicking the delete button retrieves the text before the cursor as 'aaa', but the expected value is 'aa'.

Text('Display one character on the screen.')
  .fontSize(50)
  .fontWeight(FontWeight.Bold)
  .width('100%')
  .backgroundColor(Color.Blue)
  .onClick(() => {
    InputDemoService.inputMethodService?.textInputClient?.insertTextSync("a")
    let c = InputDemoService.inputMethodService?.textInputClient?.getForwardSync(1000)
    console.log("Text before the cursor=》"+ c);
  })
Text('Delete')
  .fontSize(50)
  .fontWeight(FontWeight.Bold)
  .width('100%')
  .backgroundColor(Color.Blue)
  .onClick(() => {
    InputDemoService.inputMethodService?.textInputClient?.deleteForwardSync(1)
    let c = InputDemoService.inputMethodService?.textInputClient?.getForwardSync(1000)
    console.log("Retrieve text before the cursor=》"+ c);
  })

Background Knowledge

1. Input Method Service @ohos.inputMethodEngine: Designed for input method applications (including system input method applications and third-party input method applications), it provides capabilities for input method applications, including: creating a soft keyboard window, inserting/deleting characters, selecting text, listening to physical keyboard key events, etc.

getForwardSync: Retrieves a fixed-length text before the cursor.

Troubleshooting Process

According to the text description, the method fails to promptly acquire or refresh the text before the cursor, and the issue requires the text to be obtained immediately after it is displayed on the screen.
As shown in the code above, due to the incorrect timing of the call, the current cursor is still in the editing state. The getForwardSync() method retrieves the result of the last cursor state, which is why both the input and deletion operations acquire the text from the last operation.

Analysis Conclusion

The timing of the call is incorrect; the text currently obtained by the cursor is the result of the previous operation.

Solution

The 'on' callback is triggered when certain specific events occur, such as gaining focus or the input method being activated. Similarly, the 'onClick' callback is also triggered under these conditions. Therefore, using 'onClick' or 'on' callbacks while the cursor is still in the editing state is clearly not feasible. Instead, the input method kit's 'off('selectionChange')' should be used to implement the callback for listening and obtaining the cursor's value. The 'off' callback is triggered when the input method stops or loses focus, while 'off('selectionChange')' listens for the cancellation of the text selection range change event.
Similarly,'off('textChange')' allows for triggering custom callback events when subscribing to text change events is canceled. Both are related to text changes, but the difference between 'textChange' and 'selectionChange' lies in the fact that the 'textChange' callback function retrieves the string content, whereas selectionChange retrieves the original string and the positions of the start and end characters of the current string when selected.
The 'cursorContextChange' event is for cursor changes, and the parameters listened to are 'x', 'y', and 'height'. It is important to note that 'y' is the y-coordinate value of the top of the cursor, while '-x' is the coordinate value of the top of the cursor, and 'height' is the height value of the cursor.

try {
  inputMethodEngine.getKeyboardDelegate()
    .off('selectionChange', (oldBegin: number, oldEnd: number, newBegin: number, newEnd: number) => {
      console.log('delete selectionChange notification.');
      // Here, the `getForwardSync()` method is implemented.
    });
} catch (err) {
  console.error(`Failed to selectionChange. error code: ${err.code}`);
}

Written by Emrecan Karakas