Ionic 4：ion-textarea setfocus 未将光标设置在文本的最后位置答案

【问题标题】：Ionic 4: ion-textarea setfocus not set cursor at last position of textIonic 4：ion-textarea setfocus 未将光标设置在文本的最后位置
【发布时间】：2020-12-10 11:18:13
【问题描述】：

我正在使用 ionic4 ion-textarea -

Html ->
<ion-textarea rows="2" cols="3" [(ngModel)]="wareHouseTxt" #houseTextArea
            (ngModelChange)="changeButtonStatus()" maxlength="4">
 <span class="shortcut-button">F9</span>
</ion-textarea>
TS -> 
@ViewChild('houseTextArea', null) houseTextArea: IonTextarea;
this.houseTextArea.setFocus();

根据上面的代码，焦点设置在 textarea 内，但光标放置在错误的位置。对于参考，请检查图像 -

问题 - 如何将光标设置在文本的最后位置。？（离子 4）

【问题讨论】：

不知道为什么会这样，但尝试使用 this. houseTextArea.nativeElement.focus(); 这应该可以解决您的问题
感谢您的回答...但它不起作用，因为我使用 IonTextArea 而不是 ElementRef 来获取 nativeElement

标签： javascript angular ionic-framework ionic4

【解决方案1】：

这似乎是 Ionic 中一个非常古老的错误。我整理如下：

组件类：


@ViewChild('houseTextArea') houseTextArea: IonTextarea;

async setTextCursor() {
 let inputEle = await this.houseTextArea.getInputElement();
 inputEl.setSelectionRange(this.wareHouseTxt.length,this. wareHouseTxt.length);
}

组件模板：

<ion-textarea rows="2" cols="3" [(ngModel)]="wareHouseTxt" #houseTextArea
            (ngModelChange)="changeButtonStatus()" maxlength="4" (ionFocus)='setTextCursor()'>
 <span class="shortcut-button">F9</span>
</ion-textarea>

【讨论】：

【解决方案2】：

通过将 ion-input 或 ion-textarea 包装在 ion-item 中来修复此行为。在这里查看讨论：https://github.com/ionic-team/ionic-framework/issues/9960#issuecomment-271998988

【讨论】：