HarmonyOS 鸿蒙Next 动态修改TextArea输入框数量时光标总是跳转到第一个输入框的问题如何避免,defaultFocus都是false

发布于 1周前 作者 sinazl 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 动态修改TextArea输入框数量时光标总是跳转到第一个输入框的问题如何避免,defaultFocus都是false 动态修改TextArea输入框数量的时候 光标总是跳转到第一个输入框 这个问题如何避免,defaultFocus都是false

2 回复

还请参考下以下demo:

import { util } from '@kit.ArkTS';

@Observed
class AcquireModel {
  public acquire: string = '';
  public id: string;

  constructor(acquire: string) {
    this.acquire = acquire;
    this.id = util.generateRandomUUID(true)
  }
}

@Entry
@Component
struct SaveImagePage {
  @State message: string = 'Hello World';
  @State @Watch('listChange') willGetList: AcquireModel[] = [new AcquireModel('')]

  listChange(v: AcquireModel[]) {
    console.log('change', JSON.stringify(v))
  }

  @State focusId: string = '';
  @State isDel: boolean = false;
  @State deleteId: string = '';

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        TextArea({ placeholder: '荐语' })
          .width('100%')
          .height(100)
        Text('你将获得')
        ForEach(this.willGetList, (e: AcquireModel, i: number) => {
          Column() {
            Row() {
              Child({ e: e, focusId: this.focusId, delId: this.deleteId })
              Button('-')
                .onClick(() => {
                  this.isDel = true;
                  this.deleteId = e.id
                  const index = this.willGetList.findIndex((item) => item.id === e.id);
                  console.log('indexSelf=====' + i + 'indexCom====' + index);
                  this.willGetList.splice(index, 1)
                  console.dir(this.willGetList)
                  console.log('this.focusId=====' + this.focusId)
                })
            }
          }
        }, (e: AcquireModel, i) => e.id)
        Button('+')
          .onClick(() => {
            this.willGetList.push(new AcquireModel(''))
          })
      }
      .justifyContent(FlexAlign.Center)
      .height('100%')
      .width('100%')
      .id('card')
    }
  }
}

@Component
struct Child {
  @ObjectLink e: AcquireModel;
  @Link focusId: string;
  @Link @Watch('deleteChange') delId: string;

  deleteChange(value: string) {
    if (!this.delId) {
      return;
    }
    if (this.focusId === this.e.id && this.delId !== this.focusId) {
      setTimeout(() => {
        this.getUIContext().getFocusController().requestFocus(this.focusId)
        this.delId = '';
      }, 50)
    }
  }

  build() {
    TextArea({ text: this.e.acquire })
      .layoutWeight(1)
      .height(30)
      .onChange((v) => {
        console.log(v);
        this.e.acquire = v
      })
      .onFocus(() => {
        this.focusId = this.e.id;
        console.log('now focus')
      })
      .id(this.e.id)
  }
}

此是因为数组发生了变化,ForEach刷新了UI所以焦点移动了,可以先参考下demo解决光标移动的问题

更多关于HarmonyOS 鸿蒙Next 动态修改TextArea输入框数量时光标总是跳转到第一个输入框的问题如何避免,defaultFocus都是false的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙系统中,当动态修改TextArea输入框数量时,如果光标总是跳转到第一个输入框,且已确认所有TextArea的defaultFocus属性均为false,可以尝试以下方法解决:

  1. 延迟设置焦点:在动态添加或修改TextArea后,通过延时任务(如使用setTimeoutPostDelayed方法)来设置焦点到期望的输入框上。这可以确保页面渲染完成后再进行焦点设置。

  2. 手动管理焦点:在添加或删除TextArea后,手动调用requestFocus()方法到指定的输入框上。确保在调用此方法前,该输入框是可见且已正确添加到布局中。

  3. 检查布局更新:确保在动态修改布局时,正确更新了UI线程中的布局信息。有时,由于布局未及时更新,可能导致焦点行为异常。

  4. 避免重复添加:检查代码逻辑,确保没有重复添加或错误地删除了TextArea,这可能导致焦点行为不可预测。

  5. 使用日志调试:添加日志输出,跟踪TextArea的添加、删除及焦点设置过程,帮助定位问题所在。

如果问题依旧没法解决请联系官网客服,官网地址是 https://www.itying.com/category-93-b0.html

回到顶部