切换到mat-input时不一致的选择行为

Question

我正在使用一组材料垫输入控件，当用户进入控件时，我不太理解选择逻辑。在某些情况下，我会选择字段的整个值，在其他情况下，光标位于现有输入的左侧。

请参见下面的示例：

EX1光标位于预先存在的值的最后一个字符之后：

​

Ex 2-选择整数值。

​

如何控制此行为？如果是输入字段中的前置值，我希望选择整个内容，这样，如果用户想要更改它，他们可以开始键入。

下面是input元素的html：

<mat-form-field class="input-cell" [ngClass]='inputClass'
   *ngIf="rowFocus && (inputType==InputTypeEnum.textInput  || inputType==InputTypeEnum.numberInput || inputType==InputTypeEnum.percentInput)">

   <mat-label>{{fieldName}}</mat-label>

   <input matInput placeHolder="placeholder" [(ngModel)]="value" (focus)="gotFocus()" (click)="inputClick($event)"
   [disabled]="readOnly"
      (blur)="lostFocus($event)" [errorStateMatcher]="matcher" #cellInput
      (keydown)="keyDown($event)"
       >
   <mat-error>{{errorText}}</mat-error>
</mat-form-field>

Answer 1

我可以通过延迟调用焦点事件中的HTMLElement上的select来解决这个问题，如下所示：

添加到组件中：

 @ViewChild('cellInput') inputElement: ElementRef; //refers to the input element

 gotFocus() {
  setTimeout(()=>{ this.inputElement.nativeElement.select();},100)
 }