HarmonyOS 鸿蒙Next TextArea的光标位置处插入文字

HarmonyOS 鸿蒙Next TextArea的光标位置处插入文字

记录个人遇到的问题和解决方案

@Entry @Component struct TextAreaExample { @State text: string = ‘’ @State positionInfo: CaretOffset = { index: 0, x: 0, y: 0 } controller: TextAreaController = new TextAreaController() startIndex: number = 0

build() { Column() { TextArea({ text: this.text, placeholder: ‘The text area can hold an unlimited amount of text. input your word…’, controller: this.controller }) .placeholderFont({ size: 16, weight: 400 }) .width(336) .height(56) .margin(20) .fontSize(16) .fontColor(’#182431’) .backgroundColor(’#FFFFFF’) .onChange((value: string) => { this.text = value if (this.startIndex > 0){ this.controller.caretPosition(this.startIndex) this.startIndex = 0 } }) Button(‘插入 abc’) .backgroundColor(’#007DFF’) .margin(15) .onClick(() => { this.positionInfo = this.controller.getCaretOffset() this.text = this.text.substring(0, this.positionInfo.index)+“abc”+this.text.substring(this.positionInfo.index); this.startIndex = this.positionInfo.index+4 }) }.width(‘100%’).height(‘100%’).backgroundColor(’#F1F3F5’) } }