时间戳

首页 > 解决方案 > Ionic [Angular] - 反应形式：使用 setValue() selectionStart/End 后不移动光标

angular - Ionic [Angular] - 反应形式：使用 setValue() selectionStart/End 后不移动光标

问题描述

我想用放置“！”的输入处理程序制作一个响应式表单 发生键盘输入后，在输入字段的末尾签名（通过 setValue()）。同时，我希望在输入发生后光标移动到输入字段的开头，我将其用于输入标签的“selectionStart/selectionEnd”属性。

如果我使用纯 html ，一切正常。但是对于离子输入它不起作用，并且在键盘输入发生后光标移动到末尾。作为另一个输入的包装器，我尝试为初始离子输入及其子输入设置 selectionStart/selectionEnd 属性，但没有成功。

在ts文件中更改表单控件值后，如何使光标移动到Ionic输入中输入字段的开头？

home.page.ts：

export class HomePage {
  form = new FormGroup({
    amount: new FormControl(''),
  });
  constructor() {}

  amountHandler(event: any) {
    this.form.get('amount').setValue(event.target.value + '!');
    event.target.firstChild.selectionStart = 0;
    event.target.firstChild.selectionEnd = 0;
    //event.target.selectionStart = 0;
    //event.target.selectionEnd = 0;
  }
}

home.page.html：

<form [formGroup]="form">
  <ion-item>
    <ion-label>Amount: </ion-label>
    <ion-input
      (ionInput)="amountHandler($event)"
      formControlName="amount"
    ></ion-input>    
  </ion-item>
</form>

标签： angularformsionic-framework

解决方案

setValue()被异步处理，即它发生在你的selectionStart. 尝试在. _setValue()

tick() 调用此方法以显式处理更改检测及其副作用。

推荐阅读