Simulate Input Field Cursor Blinking Effect

Read the original article：Simulate Input Field Cursor Blinking Effect

Problem Description

How to achieve the effect of a blinking cursor in an input box when no text is entered?

Background Knowledge

• Visibility: Control the display or hiding of components. When visibility is not set, the component is displayed by default. You can control whether a component is visible by setting the attribute values to Hidden (hidden but occupies space in layout), Visible (displayed), or None (hidden and does not participate in layout or occupy space).

Solution

To achieve the effect of a blinking cursor in an input box when no text is entered, you can use the setInterval timer to toggle the visibility property of the element, thereby simulating the blinking cursor effect. The reference code is as follows:

@Entry
@Component
struct TextInputPage {
  @State isShowPoint: boolean = true;
  private setIntervalB: number = -1;
  @State isFirstCLick: boolean = true;

  aboutToDisappear(): void {
    // Page destroyed, timer closed.
    clearInterval(this.setIntervalB);
  }

  aboutToAppear(): void {
    this.carbetFire();
  }

  carbetFire() {
    if (this.isFirstCLick) {
      this.isFirstCLick = false;
      this.setIntervalB = setInterval(() => {
        this.isShowPoint = !this.isShowPoint;
      }, 800);
    }
  }

  build() {
    RelativeContainer() {
      Stack() {
        Row() {
          Row()
            .width(2)
            .height(18)
            .backgroundColor('#0A59F7')
            .margin({ left: 16 });
          Blank()
            .height('100%');
        }
        .width('100%')
        .height('100%')
        // Control the display and hiding of components
        .visibility(this.isShowPoint ? Visibility.Visible : Visibility.None);

        TextInput()
          .margin({left:16,right:16})
          .width('100%')
          .onEditChange((status: boolean) => {
            if (status) {
              clearInterval(this.setIntervalB);
              this.isShowPoint = false;
              this.isFirstCLick = true;
            } else {
              this.isShowPoint = true;
              this.carbetFire();
            }
          });
      }
      .alignRules({
        center: { anchor: '__container__', align: VerticalAlign.Center },
        middle: { anchor: '__container__', align: HorizontalAlign.Center }
      })
      .width('95%')
      .height(40)
      .margin({ left: 16, right: 16 });
    }
    .height('100%')
    .width('100%');
  }
}

Verification Result

The example implementation is shown in the following figure:

• On page load, a simulated cursor blinks every 800 ms when the input is empty and not focused.
• When the input gains focus, the timer stops and the blinking cursor is hidden.
• When focus is lost, the timer restarts and blinking resumes.
• The interval is cleared on page destruction, preventing timer leaks.

Written by Bilal Basboz