TextInput sets mobile phone number format input - How to solve the issue of cursor position disorder after modifying data?

Read the original article：TextInput sets mobile phone number format input - How to solve the issue of cursor position disorder after modifying data?

Problem Description

Using HarmonyOS TextInput to enter phone numbers formatted as 3-4-4 via onChange() leads to two issues in practice:

Spaces can be deleted.
On delete/insert, the cursor jumps to the end.

Current Effect

For the number 123 4567 8910, the space between 7 and 8 was removed. The TextInput space was first deleted, followed by a refresh of the value, displaying: 123 4567 8910, with the cursor positioned at the end.

Expected Outcome:

For the number 123 4567 8910, the space between 7 and 8 was removed, effectively deleting the digit 7, resulting in the display: 123 4568 910, with the cursor positioned after the digit 6.

Delete the number 6, display 123 4578 910, with the cursor positioned after the number 5.

Background Knowledge

TextInput is a single-line text input component. When the input content changes, the onChange callback function of this component is triggered. When the input is completed, the onDidInsert callback function is triggered. When the deletion is completed, the onDidDelete callback function is triggered.
RichEditor is a component that supports mixed text and image layout as well as interactive text editing.

Troubleshooting Process

Observed that formatting in onChange requires reassigning the value (to re-apply spaces), which occurs after the change — causing the caret to jump to the end.
Concluded we need access to events that fire before the value is committed to compute:
- The intended display value, and
- The correct caret position.
Identified TextInput pre-edit events:
- onDidInsert(callback: Callback<InsertValue, boolean>)
- onDidDelete(callback: Callback<DeleteValue, boolean>)
Implemented logic to:
- Compute the “real” index ignoring spaces,
- Update the underlying number string,
- Reformat to 3-4-4, and
- Restore caret to the expected position.
Verified behavior; noted a minor flicker on caret reset with TextInput. Explored RichEditor as an alternative for smoother control.

Analysis Conclusion

Before the value changes, the display result and cursor position are obtained, and then the assignment and cursor positioning can be performed.

Solution

According to the positioning logic, before the value changes, the expected display result and cursor position are calculated and assigned through the onDidInsert and onDidDelete callback functions. The core code is as follows:

insertNumber(value: RichEditorInsertValue) {
  this.controller.deleteSpans({ start: 0 })
  let realOffset = this.getRealOffset(value.insertOffset, true)
  this.originalPhoneNumber = this.originalPhoneNumber.substring(0, realOffset) + value.insertValue +
  this.originalPhoneNumber.substring(realOffset)
  //The maximum length is 11 characters.
  this.originalPhoneNumber = this.originalPhoneNumber.substring(0, 11)
  this.controller.addTextSpan(this.getSpacePhoneNumber(), { style: this.phoneNumberStyle })
  let caretOffset = this.getCaretOffset(realOffset, true)
  this.controller.setCaretOffset(caretOffset)

}

deleteNumber(value: RichEditorDeleteValue) {
  if (this.controller.getCaretOffset() === 0) {
    // The current cursor position is at the beginning; return directly.
    return
  }
  this.controller.deleteSpans({ start: 0 })
  let realOffset = this.getRealOffset(value.offset, false)
  // Concatenate the actual phone number value
  this.originalPhoneNumber =
    this.originalPhoneNumber.substring(0, realOffset) + this.originalPhoneNumber.substring(realOffset + 1)
  // Add text content; if the component cursor is blinking, the cursor position will be updated to the end of the newly inserted text after insertion.
  this.controller.addTextSpan(this.getSpacePhoneNumber(), { style: this.phoneNumberStyle })

  let caretOffset = this.getCaretOffset(realOffset, false)
  this.controller.setCaretOffset(caretOffset)
}

Verification has confirmed that the desired effects have been achieved. However, a minor drawback is the flickering effect when the cursor is reset upon deletion. Therefore, a similar text input component, RichEditor, was identified. RichEditor is a component that supports mixed text and image layout as well as interactive text editing, offering more flexible editing and input capabilities.
The expected results were achieved using the RichEditor component. A complete example is provided below for reference:

@Entry
@Component
struct PhoneNumberInputTest {
  private controller: RichEditorController = new RichEditorController()
  private originalPhoneNumber: string = ''
  // Text font style, black, bold
  private phoneNumberStyle: RichEditorTextStyle = {
    fontColor: Color.Black,
    fontWeight: FontWeight.Bold
  }

  insertNumber(value: RichEditorInsertValue) {
    this.controller.deleteSpans({ start: 0 })
    let realOffset = this.getRealOffset(value.insertOffset, true)
    this.originalPhoneNumber = this.originalPhoneNumber.substring(0, realOffset) + value.insertValue +
    this.originalPhoneNumber.substring(realOffset)
    //The maximum length is 11 characters.
    this.originalPhoneNumber = this.originalPhoneNumber.substring(0, 11)
    this.controller.addTextSpan(this.getSpacePhoneNumber(), { style: this.phoneNumberStyle })
    let caretOffset = this.getCaretOffset(realOffset, true)
    this.controller.setCaretOffset(caretOffset)

  }

  deleteNumber(value: RichEditorDeleteValue) {
    if (this.controller.getCaretOffset() === 0) {
      // The current cursor position is at the beginning; return directly.
      return
    }
    this.controller.deleteSpans({ start: 0 })
    let realOffset = this.getRealOffset(value.offset, false)
    // Concatenate the actual phone number value
    this.originalPhoneNumber =
      this.originalPhoneNumber.substring(0, realOffset) + this.originalPhoneNumber.substring(realOffset + 1)
    // Add text content; if the component cursor is blinking, the cursor position will be updated to the end of the newly inserted text after insertion.
    this.controller.addTextSpan(this.getSpacePhoneNumber(), { style: this.phoneNumberStyle })

    let caretOffset = this.getCaretOffset(realOffset, false)
    this.controller.setCaretOffset(caretOffset)
  }

  getRealOffset(offset: number, isInsert: boolean) {
    let realOffset = offset
    if (realOffset >= (isInsert ? 9 : 8)) {
      realOffset -= 2
    } else if (realOffset >= (isInsert ? 4 : 3)) {
      realOffset -= 1
    }
    return realOffset
  }

  // Calculation of the Actual Cursor Position
  getCaretOffset(realOffset: number, isInsert: boolean): number {
    let caretOffset = isInsert ? realOffset + 1 : realOffset
    if (caretOffset >= 7) {
      caretOffset += 2
    } else if (caretOffset >= 3) {
      caretOffset += 1
    }
    return caretOffset
  }

  // Concatenated mobile phone number display text
  getSpacePhoneNumber(): string {
    let res = this.originalPhoneNumber
    if (res.length >= 4) {
      res = res.substring(0, 3) + '' + res.substring(3)
    }
    if (res.length >= 9) {
      res = res.substring(0, 8) + '' + res.substring(8)
    }
    return res
  }

  build() {
    RelativeContainer() {
      RichEditor({ controller: this.controller })
        .align(Alignment.Center)
        .id('PhoneNumberInputTestHelloWorld')
        .width('100%')
        .height(60)
        .backgroundColor(0xFFE3ECE3)
        .borderRadius(30)
        .alignRules({
          center: { anchor: 'container', align: VerticalAlign.Center },
          middle: { anchor: 'container', align: HorizontalAlign.Center }
        })
        .aboutToIMEInput((value: RichEditorInsertValue) => {
          // Trigger callback before input method content is entered.
          if (isNaN(Number(value.insertValue))) {
            return false
          }
          this.insertNumber(value)
          return false
        })
        .aboutToDelete((value: RichEditorDeleteValue) => {
          // Trigger callback before deleting content in the input method.
          this.deleteNumber(value)
          return false
        })
    }
    .height('100%')
    .width('100%')
  }
}

Verification Result

The key points in the aforementioned scenario primarily revolve around the handling of cursor position after reassignment and the display effect. For conventional input deletion scenarios, using TextInput can meet the majority of input field requirements. However, there are also input scenarios with special formatting requirements that necessitate UI reorganization of the displayed content. In such cases, it is recommended to use RichEditor for greater flexibility.